Home »
CSS
Table Fixed Header and Scrollable Body
In this tutorial, we will learn how to create a table that has the fixed headers of a table by using the CSS?
By Apurva Mathur Last updated : July 23, 2023
We can simply achieve this target by using the property named table-layout.
So what is so special about this property?
Let's see, what the table-layout property is?
CSS table-layout Property
This is a property that is commonly used when we are working with tables (i.e. rows and columns). This property helps us to format the table efficiently.
It has the following values:
- auto: As the name suggests, this value does the same as it sounds. This property automatically formats the table. It centrally sets the width of the cell according to the content displayed inside the cell (the cell here represents the 1 box it can be row-wise or column-wise.)
- fixed: This value allows the user to fix the width of the table as per the requirement. This value will set the width of the whole table according to the first row of the table.
- inherit: In simple words, inheritance means taking features/property from the parent element.
For example, children get some features of their parents.
This same concept is applied here; the child property will inherit the property of the parent element.
How to fix the table header with scrollable body?
The first step is to simply write the code under the table tag which will insert the record in a table format.
For this I've used the following tags:
- <table>: Whenever we want to write any content in the table format, it's important to write that content inside the table tag. This tag is the initialization of the table.
- <thead>: This tag contains the header of the columns.
- <th>: This tag is used as header cells. We use this tag inside <tr> tag. It mainly consists of the header part of the table.
- <td>: This tag is commonly called a data cell because this tag contains the data/information part of the cell. Whenever we want to insert inside the cell which is not the header then we use this tag.
- <tr>: This tag is used to define the row in a table.
Default table example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table fixed header and scrollable body</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>johnathan</td>
<td>Computer science</td>
<td>500000</td>
</tr>
<tr>
<td>Anand</td>
<td>Mechanical</td>
<td>80000</td>
</tr>
<tr>
<td>Kiara</td>
<td>IT</td>
<td>800000</td>
</tr>
<tr>
<td>Kiran</td>
<td>Electronics</td>
<td>78000</td>
</tr>
<tr>
<td>shyam</td>
<td>Computer science</td>
<td>70000</td>
</tr>
<tr>
<td>sonam</td>
<td>Computer science</td>
<td>80000</td>
</tr>
</tbody>
</table>
</body>
</html>
The output of the above code is:
CSS to make table fixed header and scrollable body
Use the below-given CSS to make table fixed header and scrollable body:
<style>
table {
table-layout: fixed;
}
td,th {
padding: 5px;
min-width: 200px;
}
th {
position: sticky;
}
thead tr {
background: lightblue;
color: black;
display: block;
}
tbody {
display: block;
height: 200px;
width: 100%;
overflow-y: auto;
}
tbody tr:nth-child(even) {
background: lavender;
}
</style>
Now, apply the CSS which will fix the header of this table. For this, I've used table-layout:fixed property to hit this target.
HTML and CSS code to table fixed header and scrollable body
The following is the complete code/example to create a table with fixed headers and scrollable body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table fixed header and scrollable body</title>
</head>
<style>
table {
table-layout: fixed;
}
td,th {
padding: 5px;
min-width: 200px;
}
th{
position: sticky;
}
thead tr {
background:lightblue;
color: black;
display: block;
}
tbody {
display: block;
height: 200px;
width: 100%;
overflow-y: auto;
}
tbody tr:nth-child(even) {
background: lavender;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>johnathan</td>
<td>Computer science</td>
<td>500000</td>
</tr>
<tr>
<td>Anand</td>
<td>Mechanical</td>
<td>80000</td>
</tr>
<tr>
<td>Kiara</td>
<td>IT</td>
<td>800000</td>
</tr>
<tr>
<td>Kiran</td>
<td>Electronics</td>
<td>78000</td>
</tr>
<tr>
<td>shyam</td>
<td>Computer science</td>
<td>70000</td>
</tr>
<tr>
<td>sonam</td>
<td>Computer science</td>
<td>80000</td>
</tr>
<tr>
<td>Aditya</td>
<td>Civil</td>
<td>70000</td>
</tr>
<tr>
<td>Anchal</td>
<td>Computer science</td>
<td>20000</td>
</tr>
<tr>
<td>Kanan</td>
<td>IT</td>
<td>90000</td>
</tr>
<tr>
<td>shaurya</td>
<td>Mechnical</td>
<td>10000</td>
</tr>
<tr>
<td>Diya</td>
<td>Civil</td>
<td>30000</td>
</tr>
<tr>
<td>Hena</td>
<td>Electronics</td>
<td>40000</td>
</tr>
<tr>
<td>Bhavya</td>
<td>Computer science</td>
<td>30000</td>
</tr>
</tbody>
</table>
</body>
</html>
The output of the above code is:
Example code explanation
Talking about the CSS code, the foremost thing is to fix the table layout as it will set the width as per the requirement, moving further basic padding, margin, color, etc properties have been applied which will just set the content and table cells. The important thing in the code is overflow-y: auto; This property will fix the width at the y-axis which will give a scrollable body to the table.
CSS Examples »