Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Tables with Fixed Header on Scroll in CSS
We can create HTML tables with fixed header on scroll using CSS. It helps to increase readability as user doesn't have to scroll everytime to check the table header. In this article, we will learn and understand two different approaches for HTML tables with fixed header on scroll in CSS.
We have a table inside a div element with class name as container. Our task is to fix HTML table header on scroll using CSS.
Syntax
/* Method 1: Using position sticky */
th {
position: sticky;
top: 0;
}
/* Method 2: Using display block */
tbody {
display: block;
overflow: auto;
height: value;
}
thead tr {
display: block;
}
Approaches for HTML Tables with Fixed Header on Scroll
Here is a list of approaches for HTML tables with fixed header on scroll in CSS which we will be discussing in this article with stepwise explanation and complete example codes.
Fix Table Header Using position Property
In this approach to fix HTML table header on scroll, we have used sticky value of position property and overflow-y property.
- We have used "overflow-y: auto;" property which adds a vertical scroll for table when it overflows.
- We have used "position: sticky;" and "top: 0;" which sticks table header at the top.
Example
Here is a complete example code implementing above mentioned steps to fix HTML table header on scroll −
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables with Fixed Header on Scroll in CSS</title>
<style>
.container {
overflow-y: auto;
height: 130px;
}
th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px 10px;
border: 2px solid #626d5c;
text-align: center;
}
th {
background: #04af2f;
color: white;
}
</style>
</head>
<body>
<h3>HTML Tables with Fixed Header on Scroll in CSS</h3>
<p>In this example we have used position property to fix table head on scroll using CSS.</p>
<div class="container">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Emp 1</td><td>Patna</td></tr>
<tr><td>2</td><td>Emp 2</td><td>Delhi</td></tr>
<tr><td>3</td><td>Emp 3</td><td>Mumbai</td></tr>
<tr><td>4</td><td>Emp 4</td><td>Kolkata</td></tr>
<tr><td>5</td><td>Emp 5</td><td>Bangalore</td></tr>
<tr><td>6</td><td>Emp 6</td><td>Chennai</td></tr>
<tr><td>7</td><td>Emp 7</td><td>Hyderabad</td></tr>
<tr><td>8</td><td>Emp 8</td><td>Pune</td></tr>
<tr><td>9</td><td>Emp 9</td><td>Jaipur</td></tr>
<tr><td>10</td><td>Emp 10</td><td>Ahmedabad</td></tr>
</tbody>
</table>
</div>
</body>
</html>
A table with green header row that stays fixed at the top when scrolling through the table rows. The table has a limited height with a scroll bar appearing for vertical navigation through employee data.
Fix Table Header Using display Property
In this approach to fix HTML table header on scroll, we have used block value of display property and overflow property.
- We have used "overflow: auto;" property which adds a scroll bar for table when it overflows.
- We have used "display: block;" on tbody and thead tr which makes table header to stick at top and table body to scroll.
Example
Here is a complete example code implementing above mentioned steps to fix HTML table header on scroll −
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables with Fixed Header on Scroll in CSS</title>
<style>
tbody {
display: block;
width: 100%;
overflow: auto;
height: 130px;
}
thead tr {
display: block;
}
th, td {
text-align: center;
padding: 5px 10px;
width: 200px;
border: 1px solid #626d5c;
}
th {
background: #04af2f;
color: white;
}
table {
width: 100%;
}
</style>
</head>
<body>
<h3>HTML Tables with Fixed Header on Scroll in CSS</h3>
<p>In this example we have used display property to fix table head on scroll using CSS.</p>
<div class="container">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Emp 1</td><td>Patna</td></tr>
<tr><td>2</td><td>Emp 2</td><td>Delhi</td></tr>
<tr><td>3</td><td>Emp 3</td><td>Mumbai</td></tr>
<tr><td>4</td><td>Emp 4</td><td>Kolkata</td></tr>
<tr><td>5</td><td>Emp 5</td><td>Bangalore</td></tr>
<tr><td>6</td><td>Emp 6</td><td>Chennai</td></tr>
<tr><td>7</td><td>Emp 7</td><td>Hyderabad</td></tr>
<tr><td>8</td><td>Emp 8</td><td>Pune</td></tr>
<tr><td>9</td><td>Emp 9</td><td>Jaipur</td></tr>
<tr><td>10</td><td>Emp 10</td><td>Ahmedabad</td></tr>
</tbody>
</table>
</div>
</body>
</html>
A table with a fixed green header row that remains visible while the table body scrolls independently. The table body has its own scroll bar for navigating through employee records.
Conclusion
In this article, we have understood how to fix HTML table header on scroll in CSS. We discussed two different approaches: using sticky value of position property with overflow-y property, and using block value of display property with overflow property. Both methods effectively create scrollable tables with fixed headers for better user experience.
26K+ Views
