Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create sticky table headers in Chrome ?

  • Last Updated : 03 Jun, 2020

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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example: 
 




<!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>

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.
 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!