from the main to the upper table. The result is as follows:

Header no longer disappears in vertical scrolling, but the headers are misaligned. Source: http://jsfiddle.net/335ob1en/3/

 

After isolating the header from the main table, it is no longer affected by the scrolling. However, the header's width is not constrained to that of the main table, in addition to misalignment between them both. To fix the width problem, CSS is utilized the same way as in the first step (Making the table compact), but with the help of a parent

that is wrapping the child header area. The parent div will have the same width as the main table, but will use an overflow:hidden property so as not to show a scrollbar (As opposed to overflow:auto). For the alignment, we start using Javascript to loop over each header cell and its adjacent main table cell to compare widths and equalize them. Though there are other techniques to avoid the use of Javascript, this technique in particular obtains its significance in cases of content-dependent widths as opposed to unifying the width of every cell and thus possibly causing a visual appeal problem. The following illustrates the result with source code:

Aligned and fixed vertically. Source: http://jsfiddle.net/335ob1en/4/

 

One problem remains: The header does not scroll left or right with horizontal scroll. As shown:

Header not scrolling left/right

 

To solve this, we make use of Javascript again. Here, an onscroll listener is added to main table to initiate a sequence of commands every time the scrollbar is moved. This is utilized to make the header move the same scroll displacement as the main table. The header must have a position:relative CSS property for it to be allowed dynamic movement. The final result is illustrated below:

Header now scrolls with the table scroll. Source: http://jsfiddle.net/335ob1en/5/

 

This article demonstrated a set of techniques to eventually reach a compact usable table, as opposed to a large one with no fixed header. Some of the techniques mentioned here may not necessarily match most cases and would depend on business requirements, but the concept ought to remain the same:

  • The header should be isolated from the main table.
  • Alignment can be done through fixed cell widths OR widths equalization of adjacent header and table cells.
  • Javascript onscroll is needed to move the header along with the table (In case of large table horizontally)