xTableHeaderFixed Demo S3

Status

04May2011 - Experimenting with zoom.

Code & Docs

xTableHeaderFixed - view source code, documentation and revision history.

Demos

The S demos simulate collapsed borders 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 S1 and S2 have different styling so an xTableHeaderFixed object is instantiated for each table. Table 2 in the S3 demo uses the "header no-hide" feature (yOffset=0).

  • Demo S1 - The container is the window object.
  • Demo S2 - Multiple tables in a scrollable DIV container.
  • Demo S3 - Each table has its own scrollable DIV as a container.
  • Demo S4 - This is similar to demo S1 but has a position:fixed horizontal bar at the top of the viewport.

The C demos 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 C1 and C2 have the same styling so only one xTableHeaderFixed object is instantiated. Table 2 in the C3 and Ajax demos uses the "header no-hide" feature (yOffset=0).

  • Demo C1 - The container is the window object.
  • Demo C2 - Multiple tables in a scrollable DIV container.
  • Demo C3 - Each table has its own scrollable DIV as a container.
  • Ajax Demo - The container is a scrollable DIV. The tables are served via Ajax.

Here's the demo that started it all:

  • Demo 0 - the original "catfish" version.

Zoom!

Previously, theseeker asked about zoom support. Now shutter also asked about it. So now I'm experimenting with zoom support on this page. View the source of this page to see my experiments.

11May2011: My idea is to detect a zoom event and then repaint all xthf objects on the page - to allow them to adapt to the new zoom setting. This works fairly well (with no changes to xTableHeaderFixed) when you use ctrl+, ctrl-, ctrl0 and ctrl+mousewheel to zoom - but not in IE7 which did not implement zoom as completely as IE8+. It looks like listening for the window resize event might be a better way to detect zoom changes. But that doesn't appear to work in IE7.

Discussions

There are many threads on xTableHeaderFixed at the X Forums.

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

Demo S3

Table 1

T1Col0T1Col1T1Col2Table 1, Column 3T1Col4T1Col5T1Col6
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
rFc0rFc1rFc3rFc4rFc5rFc6

Table 2

T2Col0T2Col1Table 2, Column 2Table 2 Column 3T2Col4T2Col5T2Col6
r0c0r0c1r0c2r0c3xTableHeaderFixed0r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1r2c2r2c3r2c4r2c5r2c6
xTableHeaderFixed1r3c1r3c2r3c3r3c4r3c5r3c6
r4c0r4c1r4c2r4c3r4c4r4c5r4c6
r5c0r5c1r5c2r5c3r5c4r5c5r5c6
r6c0r6c1r6c2r6c3r6c4r6c5r6c6
r7c0r7c1r7c2r7c3r7c4r7c5r7c6
r8c0r8c1xTableHeaderFixed2r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2rAc3rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc2rCc3rCc4xTableHeaderFixedrCc6
rDc0rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4rEc5rEc6
rFc0rFc1rFc2rFc4rFc5xTableHeaderFixed3

Table 3

colspan='5'colspan='2'
Group 1Group 2Group 3
T3Col0T3Col1Table 3, Column 2T3Col3T3Col4T3Col5T3Col6
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