How to create sticky table headers in Chrome ?

The headers of a table remain fixed at the top of the screen while you scroll down through the table are called the sticky table headers. They are used to help the viewers to know the purpose of data in the columns when the original headers are lost from the view. It eliminates the inconvenience of scrolling up and down the table to get the reference of the data being read. Here, we will be seeing how to create sticky table headers in a table. 

Approach: The approach is to set the position property as sticky on the table headers so that they remain fixed at the top while scrolling down the table. 

Example: 
 

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create sticky table 
        headers In Chrome?
    </title>
      
    <style>
        th {
            padding: 5px;
            background-color: #4cb96b;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }
    </style>
</head>
  
<body>
    <p>
        Below is a table which has 
        sticky table headers
    </p>
  
    <table width="100%">
        <thead>
            <th>CHARACTER</th>
            <th>ENCODED FORM</th>
        </thead>
        <tbody style="text-align: center;">
            <tr>
                <td>backspace</td>
                <td>%08</td>
            </tr>
            <tr>
                <td>tab</td>
                <td>%09</td>
            </tr>
            <tr>
                <td>linefeed</td>
                <td>%0A</td>
            </tr>
            <tr>
                <td>c return</td>
                <td>%0D</td>
            </tr>
            <tr>
                <td>space</td>
                <td>%20</td>
            </tr>
            <tr>
                <td>!</td>
                <td>%21</td>
            </tr>
            <tr>
                <td>“</td>
                <td>%22</td>
            </tr>
            <tr>
                <td>#</td>
                <td>%23</td>
            </tr>
            <tr>
                <td>$</td>
                <td>%24</td>
            </tr>
            <tr>
                <td>%</td>
                <td>%25</td>
            </tr>
            <tr>
                <td>&</td>
                <td>%26</td>
            </tr>
            <tr>
                <td>‘</td>
                <td>%27</td>
            </tr>
            <tr>
                <td>(</td>
                <td>%28</td>
            </tr>
            <tr>
                <td>)</td>
                <td>%29</td>
            </tr>
            <tr>
                <td>*</td>
                <td>%2A</td>
            </tr>
            <tr>
                <td>+</td>
                <td>%2B</td>
            </tr>
            <tr>
                <td>,</td>
                <td>%2C</td>
            </tr>
            <tr>
                <td>–</td>
                <td>%2D</td>
            </tr>
            <tr>
                <td>.</td>
                <td>%2E</td>
            </tr>
            <tr>
                <td>/</td>
                <td>%2F</td>
            </tr>
            <tr>
                <td>0</td>
                <td>%30</td>
            </tr>
            <tr>
                <td>1</td>
                <td>%31</td>
            </tr>
            <tr>
                <td>2</td>
                <td>%32</td>
            </tr>
            <tr>
                <td>3</td>
                <td>%33</td>
            </tr>
            <tr>
                <td>4</td>
                <td>%34</td>
            </tr>
            <tr>
                <td>5</td>
                <td>%35</td>
            </tr>
            <tr>
                <td>6</td>
                <td>%36</td>
            </tr>
            <tr>
                <td>7</td>
                <td>%37</td>
            </tr>
            <tr>
                <td>8</td>
                <td>%38</td>
            </tr>
            <tr>
                <td>9</td>
                <td>%39</td>
            </tr>
        </tbody>
    </table>
</body>
  
</html>

chevron_right


Output: 
 


Explanation: 
position: sticky attribute is used to make the header fixed relative to the table body. Remember sticky is not applicable on <thead> or <tr> tags but can be used with <th>. So we style the position of <th> as sticky and set it a dark background color otherwise the transparency would have made the other data of the table visible behind the headers while scrolling down. The top attribute is set as 0 to make the header fixed at the top.
 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.