Fixed headers in large HTML tables

• Download source files - 2.41 KB

Introduction

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.

...
<div id="outerDiv">
 <div id="innerDiv">
  <table>
   ...
  </table>
 </div>
</div>
...

In my sample, the table looks like this (the red border shows the innerDiv):

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 divs, overflow must be set to hidden.
• In the body div, 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. Top and 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 div.

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 divs, my outerDiv contains four innerDivs (the red borders show the innerDivs):

Finally, 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.