- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Tables with Fixed Header on Scroll in CSS
By setting postion: sticky and top: 0, we can create a fixed header on a scroll in HTML tables.
Example
The following examples give us an idea of how to implement this −
<!DOCTYPE html> <html> <head> <style> div { color: white; display: flex; padding: 2%; background-color: rgba(190,155,150); height: 135px; overflow-y: scroll; } td,th,p { text-align: center; font-size: 1.25em; } table { padding: 3%; border-collapse: collapse; border: 2px ridge green; } th { top: 0; position: sticky; background: #e5d2f1; color: black; } </style> </head> <body> <div> <table> <thead> <tr> <th>A </th> <th>B </th> <th>C </th> <th>D </th> <th>E </th> </tr> </thead> <tr> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> <tr> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> </table> <p> Duis tincidunt fermentum ipsum vel sagittis. Sed ultrices quis dui ut rutrum. Quisque et varius tellus, ut vestibulum purus. Etiam in erat fringilla, laoreet libero eu, facilisis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eu ornare augue, ut facilisis odio. </p> </div> </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> div { padding: 2%; height: 40px; overflow-y: scroll; box-shadow: inset 0 0 12px lightgreen; } tr th { background: #25f2f1; } table { text-align: center; position: relative; border-collapse: separated; width: 100%; } th { top: 0; position: sticky; background: white; } </style> </head> <body> <div> <table> <thead> <tr> <th>A </th> <th>B </th> <th>C </th> <th>D </th> <th>E </th> </tr> </thead> <tr> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> <tr> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> </table> </div> </body> </html>
Output
This will produce the following result −
- Related Articles
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- How to shrink a header on scroll with CSS and JavaScript?
- How to Create an On Scroll Fixed Navigation Bar with CSS?
- How to change background images on scroll with CSS?
- Disabling Scroll Anchoring with CSS
- How to create a gradient background color on scroll with CSS?
- Fixed Positioning with CSS
- How to resize a navigation bar on scroll with CSS and JavaScript?
- Styling Tables with CSS
- How to slide down a navigation bar on scroll with CSS and JavaScript?
- How to hide a navigation menu on scroll down with CSS and JavaScript?
- How to style a header with CSS?
- CSS overflow: scroll
- Styling Tables Working with CSS
- Set a fixed element and scroll another - jQuery

Advertisements