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.
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...