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?
- Create a Sticky Social Media Bar using HTML and CSS
- How to create an Affix or sticky Navbar ?
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How create table without using <table> tag ?
- Create a Crypto Currency Price Tracking Chrome Extension
- HTTP headers | Access-Control-Expose-Headers
- HTTP headers | Access-Control-Allow-Headers.
- HTTP headers | Access-Control-Request-Headers
- How to set Bootstrap 4 scroll to the bottom of long sticky sidebar?
- How to set sticky navbar only for first section of page?
- How to add table row in a table using jQuery?
- How to remove table row from table using jQuery ?
- Opening google search results simultaneously in new tabs in Chrome
- Text to Voice conversion using Web Speech API of Google Chrome
- Chrome Inspect Element Tool & Shortcut
- What are chrome extensions?
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.