Here’s the simple CSS trick about the Fixed table header for a scrollable table. A fixed header makes table data effortless to understand. Designers often need to implement fixed headers for better and clear data table presentations.
Read Also: HTML Interview Questions and Answers for Experienced and Freshers
Index
Fixed Table Header
There are two methods to create a fixed table header using CSS. Here we will learn both the techniques with meticulous details to implement a scrollable table with fixed header.
Method 1 – Fix Table Header Using Overflow Property
In this method, we are going to use overflow property in <tbody> tag with fixed height to freeze table header.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.fixed_header{
width: 400px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody{
display:block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixed_header thead tr {
display: block;
}
.fixed_header thead {
background: black;
color:#fff;
}
.fixed_header th, .fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
</style>
</head>
<body>
<table class="fixed_header">
<thead>
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
<thead>
<tbody>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
</tbody>
</table>
</body>
</html>Method 2 – Fix Table Header Using Display: Flex
In this method, we are going to use “display: flex” property in <table> and <tr> tags to make a scrolling table with fixed header.
<!DOCTYPE html>
<html>
<head>
<style>
table.flex-table {
display: flex;
flex-direction: column;
height: 100%;
}
table.flex-table thead,
table.flex-table tbody {
display: block;
}
table.flex-table thead {
margin-right: 0px;
}
table.flex-table tbody {
flex: 1;
overflow-y: scroll;
}
table.flex-table tr {
width: 100%;
display: flex;
}
table.flex-table tr td,
table.flex-table tr th {
display: block;
flex: 1;
}
table.flex-widths.flex-table-aligned thead > tr {
overflow-y: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<div style="height:200px;">
<table class="flex-table">
<thead>
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
<thead>
<tbody>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
<tr>
<td>************</td>
<td>------------</td>
<td>++++++++++++</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Also read: Scroll to top of the page using jQuery
Conclusion
In this article, we have learned all the methods to make a scrollable table body with fixed table header. Also, both the methods are entirely based on pure CSS to make table headers fixed.
We can apply fixed table headers while listing a long data table in HTML. I hope now you can quickly implement tables with sticky table headers.
Enjoy Designing 🙂
