Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
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.
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 explaination 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;
}
</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>
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 th 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: 100px;
}
thead tr {
display: block;
}
th,td {
text-align: center;
padding: 5px 10px;
width: 200px;
}
th {
background: #04af2f;
}
</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>
Conclusion
In this article, we have understood how to fix HTML table Header on scroll in CSS. we have discussed two different approaches for HTML tables with fixed header on scroll which are: by using sticky value of position property along with overflow-y property and by using block value of display property along with overflow property. We can use any of the above two approaches.
25K+ Views
