xTableHeaderFixed Demo 1

Status

08Jul2010 - Added a new demo, xthf7.

Documentation

xTableHeaderFixed - view source code, documentation and revision history.

Demos

Demos 1, 2 and 3 simulate border-collapse:collapse by having border-collapse:separate and border-spacing:0 in the CSS, and cellspacing='0' in the HTML, and setting only right and bottom borders on the TDs and THs. The tables in demos 1 and 2 have different styling so an xTableHeaderFixed object is instantiated for each table.

  • Demo 1 - The container is the window object.
  • Demo 2 - The container is a scrollable Element object.
  • Demo 3 - The container is a scrollable Element object. The tables are served via Ajax.

Demos 4, 5 and 6 have border-collapse:collapse and do not have border-spacing:0 in the CSS, and do not have cellspacing='0' in the HTML, and they have complete borders on the TDs and THs. The tables in demos 4 and 5 have the same styling so only one xTableHeaderFixed object is instantiated.

  • Demo 4 - The container is the window object.
  • Demo 5 - The container is a scrollable Element object.
  • Demo 6 - The container is a scrollable Element object. The tables are served via Ajax.

Demo 7 has border-collapse:collapse and a position:fixed horizontal bar at the top of the viewport. This demo is for testing the code to add a Y offset (which is only used when the container is the window object).

  • Demo 7 - This is like demo 4, but with support for a Y offset.

 

This is the demo that started it all.

  • Demo 0 - the original "catfish" version (deprecated).

Discussions

There are many threads on xTableHeaderFixed at the X Forums.

Here's the old thread at Site Point, which began on 1Dec06.

Demo 1

Table 1

Table 1 Caption
T1Col0T1Col1T1Col2T1Col3T1Col4T1Col5T1Col6
r0c0r0c1Fix those headers!r0c3r0c4r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1r2c2r2c3r2c4r2c5r2c6
r3c0r3c1r3c2r3c3r3c4r3c5r3c6
r4c0r4c1r4c2r4c3r4c4r4c5r4c6
r5c0r5c1r5c2r5c3r5c4r5c5r5c6
r6c0r6c1r6c2r6c3r6c4r6c5r6c6
r7c0r7c1r7c2r7c3r7c4r7c5r7c6
I admit it - I'm a Javascript junkie.r8c1r8c2r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2rAc3rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc2rCc3rCc4rCc5Long tables are now fun!
rDc0rDc1rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4rEc5rEc6
rFc0rFc1rFc2rFc3rFc4rFc5rFc6

Table 2

This table has no caption.

T2Col0T2Col1Table 2 Column 2Table 2 Column 3T2Col4T2Col5T2Col6
r0c0r0c1r0c2r0c3xTableHeaderFixed0r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1r2c2r2c3r2c4r2c5r2c6
xTableHeaderFixed1r3c1r3c2r3c3r3c4r3c5r3c6
r4c0r4c1r4c2r4c3r4c4r4c5r4c6
r5c0r5c1r5c2r5c3r5c4r5c5r5c6
r6c0r6c1r6c2r6c3r6c4r6c5r6c6
r7c0r7c1r7c2r7c3r7c4r7c5r7c6
r8c0r8c1xTableHeaderFixed2r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2rAc3rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc2rCc3rCc4rCc5rCc6
rDc0rDc1rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4rEc5rEc6
rFc0rFc1rFc2rFc3rFc4rFc5xTableHeaderFixed3

Table 3

This table has a row of colspan'd THs in the THEAD.

Table 3 Caption
colspan='5'colspan='2'
Group 1Group 2Group 3
T3Col0T3Col1T3Col2T3Col3T3Col4T3Col5T3Col6
r0c0r0c1r0c2r0c3r0c4r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1CSS 2.1 Property Tabler2c3r2c4r2c5r2c6
It makes a copy of the table's THEAD section.r3c1r3c2r3c3r3c4r3c5r3c6
r4c0r4c1r4c2r4c3r4c4r4c5r4c6
r5c0The position and size of the THEAD copy will be adjusted when the window is resized.r5c2r5c3r5c4r5c5r5c6
r6c0r6c1r6c2r6c3r6c4r6c5r6c6
r7c0r7c1r7c2r7c3This object is being discussed at the X forums.

I am an H2

r7c6
r8c0r8c1r8c2r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2The THEAD copy uses the same CSS class you provide for the static table.rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc3rCc4rCc5rCc6
rDc0rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4The container can be a window object or scrollable Element object.rEc6
rFc0rFc1rFc2rFc3rFc4rFc5Mozilla Developer Center