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.
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.
- How to make Bootstrap table with sticky table head?
- How to create an Affix or sticky Navbar ?
- Create a Sticky Social Media Bar using HTML and CSS
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How create table without using <table> tag ?
- How to create a table row using HTML5 ?
- How to create table cell using HTML5 ?
- How to create equal width table cell using CSS ?
- Node.js | MySQL-Create Table Using Sequelize
- HTTP headers | Access-Control-Request-Headers
- HTTP headers | Access-Control-Expose-Headers
- HTTP headers | Access-Control-Allow-Headers.
- How to set sticky navbar only for first section of page?
- How to set Bootstrap 4 scroll to the bottom of long sticky sidebar?
- What are chrome extensions?
- How to remove table row from table using jQuery ?
- How to autoplay audio on chrome ?
- How to Delete Google Chrome Browsing History?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.