There are quite a lot of ways to fix the header column and rows in HTML tables. But when tables become larger, most of them are not useful because scrolling gets far too slow. In the following sample, I will show an applicable way for IE.
My HTML page contains two
divs and a table.
In my sample, the table looks like this (the red border shows the
The main idea is to copy the
innerDiv with the table three times so that there is a
div each for the header row, the header column, the first cell in the header row, and the body of the table.
- In the first three
overflow must be set to
- In the body
overflow can be set to
scroll if the body is larger then the available space. Furthermore, the table in the body
div needs to be positioned absolutely.
Left positions have to be negative (
Top = -height of header row,
Left = -width of header column) so that the headers are no more visible than the body
By copying the whole table, all rows and columns will have equal width and height. If you would only copy the first row of the table to the header
div, column width in the header could differ from the body columns. After copying the
outerDiv contains four
innerDivs (the red borders show the
divs have to scroll synchronously. When you scroll to the right, the header row has to move to the right too, and when you scroll to the bottom, the header column needs to move too. I found a nice way to do this here.
You can view an online demo here.