Scrollable HTML Table with fixed header and fixed column

Question

I would like to create a table with scrollable data. I have to freeze the first row and first column of the table. The first row and first column of the table must automatically resize in width and height to the variable cell dimensions in the content area of the table (because the user will be adding new table cells with variable amount of content).

Someone asked a related question: How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

But the link to online demo and source code is dead, so I am unable to confirm the solution.

Answer 1

Use the excellent jQuery Datables with the FixedHeader extension.

Scroll down past the header row, and you'll see it glue itself neatly to the top of your screen.

For header, footer, left and right excitement:

http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html