Finding a way to freeze rows and columns of a table in HTML

Question

I have a large data table, perhaps about 50 columns and several hundred rows. I tried many jquery plugins to freeze the headers and columns, but they don't seem to work correctly. After you add as many columns and rows, they either freeze or load forever. From what I can tell, the problem is related to offsetHeight and offsetWidth, but I don't know enough to fix it (or even this can be fixed).

I tried using dataTables as well as fixedheadertable. I know the problem is when I add jquery. If I do not use jquery, the table loads instantly.

Does anyone have any recommendations or any ideas on how to do this without javascript? Data is a huge report, so everything should be on 1 page. I need to freeze 2 header rows and 2 columns. I also want the table to expand to 100% width (and possibly 100% height).

Answer 1

I would split your table into two tables. The first table has nothing but your table headers, then put the second table at the bottom, with your table rows.

Then put this second table in a scrollable div, so that when you scroll 100 rows, your headers will still be visible.

Something like this violin