Sticky header(row) and column in table without any jQuery plugins

Question

I have a requirement where I need to stick the first row(header) and first two columns of the table while scrolling horizontally and vertically.

I did previously with a Jquery plugin( link to plugin ) which worked quite good, but the problem was when number of rows increases like around 1000 rows, while binding the browser tab get freeze and end up in unresponsive page.

So I am looking for a CSS solution where I could achieve the same. I need the table cells to be dynamic, so the width of the table cell should increase according to the content and do not mess up with the structure of the table.

Here is a fiddle with table structure fiddle . So is there any way where I can freeze header and columns without any heavy plugin and altering the table structure?

Answer 1

Try this:

table tr > th:first-child,
table tr > td:first-child {
      position: sticky;
      left: 0;
      top: 0;
}