Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
Create a fixed header on scroll in HTML tables using the position property with the value sticky and top property 0. Set both these properties for the header i.e., the <th> element. We will see two examples to set fixed headers on scroll, one using flex and another without using the flex concept.
Create a fixed header on scroll using flex
The following example give us an idea to create a fixed header on scroll with flex −
Set the container for the table
A container div is included and within that the table is set using the <table>. The flex is set using the display property. The overflo-y is set to scroll. The content is clipped and a scroller is provided −
div {
color: white;
display: flex;
padding: 2%;
background-color: rgba(190,155,150);
height: 135px;
overflow-y: scroll;
}
Fixed header
The header is set fixed using the position property with the value sticky. The top property is also set to 0. These are applied on the <th> element i.e., the header −
th {
top: 0;
position: sticky;
background: #e5d2f1;
color: black;
}
Example
Let us see the example −
<!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>
Create a fixed header on scroll without using flex
The following example give us an idea to create a fixed header on scroll without using flex −
Set the container for the table
A container div is included and within that the table is set using the <table>. The flex is set using the display property. The overflow-y is set to scroll. The content is clipped and a scroller is provided −
div {
padding: 2%;
height: 40px;
overflow-y: scroll;
box-shadow: inset 0 0 12px lightgreen;
}
Fixed header
The header is set fixed using the position property with the value sticky. The top property is also set to 0. These are applied on the
th {
top: 0;
position: sticky;
background: white;
}
Example
Let us see the 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>
18K+ Views
