How to add a table with a fixed header and fixed column on pure CSS?

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.