Sometimes, we want to add a table with a fixed header and fixed column on pure CSS
In this article, we’ll look at how to add a table with a fixed header and fixed column on pure CSS.
How to add a table with a fixed header and fixed column on pure CSS?
To add a table with a fixed header and fixed column on pure CSS, we can set the position property.
For instance, we write
<div class="container">
<table></table>
</div>
to add a div with a table inside.
Then we write
div.container {
overflow: scroll;
}
thead th {
position: sticky;
top: 0;
}
tbody th {
position: sticky;
left: 0;
}
thead th:first-child {
left: 0;
z-index: 1;
}
to add overflow: scroll;
to make the div’s content scrollable if it overflows it.
Then we make the header sticky with
thead th {
position: sticky;
top: 0;
}
And we make the first column sticky with
thead th:first-child {
left: 0;
z-index: 1;
}
Conclusion
To add a table with a fixed header and fixed column on pure CSS, we can set the position property.