04May2011 - Experimenting with zoom.
xTableHeaderFixed - view source code, documentation and revision history.
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).
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).
Here's the demo that started it all:
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.
There are many threads on xTableHeaderFixed at the X Forums.
Here's the old thread at Site Point, which began on December 1, 2006.
T1Col0 | T1Col1 | T1Col2 | Table 1, Column 3 | T1Col4 | T1Col5 | T1Col6 |
---|---|---|---|---|---|---|
r0c0 | r0c1 | Fix those headers! | r0c3 | r0c4 | r0c5 | r0c6 |
r1c0 | r1c1 | r1c2 | r1c3 | r1c4 | r1c5 | r1c6 |
r2c0 | r2c1 | r2c2 | r2c3 | r2c4 | r2c5 | r2c6 |
r3c0 | r3c1 | r3c2 | r3c3 | r3c4 | r3c5 | r3c6 |
r4c0 | r4c1 | r4c2 | r4c3 | r4c4 | r4c5 | r4c6 |
r5c0 | r5c1 | r5c2 | r5c3 | r5c4 | r5c5 | r5c6 |
r6c0 | r6c1 | r6c2 | r6c3 | r6c4 | r6c5 | r6c6 |
r7c0 | r7c1 | r7c2 | r7c3 | r7c4 | r7c5 | r7c6 |
I admit it - I'm a Javascript junkie. | r8c1 | r8c2 | r8c3 | r8c4 | r8c5 | r8c6 |
r9c0 | r9c1 | r9c2 | r9c3 | r9c4 | r9c5 | r9c6 |
rAc0 | rAc1 | rAc2 | rAc3 | rAc4 | rAc5 | rAc6 |
rBc0 | rBc1 | rBc2 | rBc3 | rBc4 | rBc5 | rBc6 |
rCc0 | rCc1 | rCc2 | rCc3 | rCc4 | rCc5 | Long tables are now fun! |
rDc0 | rDc1 | rDc2 | rDc3 | rDc4 | rDc5 | rDc6 |
rEc0 | rEc1 | rEc2 | rEc3 | rEc4 | rEc5 | rEc6 |
rFc0 | rFc1 | rFc3 | rFc4 | rFc5 | rFc6 |
T2Col0 | T2Col1 | Table 2, Column 2 | Table 2 Column 3 | T2Col4 | T2Col5 | T2Col6 |
---|---|---|---|---|---|---|
r0c0 | r0c1 | r0c2 | r0c3 | xTableHeaderFixed0 | r0c5 | r0c6 |
r1c0 | r1c1 | r1c2 | r1c3 | r1c4 | r1c5 | r1c6 |
r2c0 | r2c1 | r2c2 | r2c3 | r2c4 | r2c5 | r2c6 |
xTableHeaderFixed1 | r3c1 | r3c2 | r3c3 | r3c4 | r3c5 | r3c6 |
r4c0 | r4c1 | r4c2 | r4c3 | r4c4 | r4c5 | r4c6 |
r5c0 | r5c1 | r5c2 | r5c3 | r5c4 | r5c5 | r5c6 |
r6c0 | r6c1 | r6c2 | r6c3 | r6c4 | r6c5 | r6c6 |
r7c0 | r7c1 | r7c2 | r7c3 | r7c4 | r7c5 | r7c6 |
r8c0 | r8c1 | xTableHeaderFixed2 | r8c3 | r8c4 | r8c5 | r8c6 |
r9c0 | r9c1 | r9c2 | r9c3 | r9c4 | r9c5 | r9c6 |
rAc0 | rAc1 | rAc2 | rAc3 | rAc4 | rAc5 | rAc6 |
rBc0 | rBc1 | rBc2 | rBc3 | rBc4 | rBc5 | rBc6 |
rCc0 | rCc1 | rCc2 | rCc3 | rCc4 | xTableHeaderFixed | rCc6 |
rDc0 | rDc2 | rDc3 | rDc4 | rDc5 | rDc6 | |
rEc0 | rEc1 | rEc2 | rEc3 | rEc4 | rEc5 | rEc6 |
rFc0 | rFc1 | rFc2 | rFc4 | rFc5 | xTableHeaderFixed3 |
colspan='5' | colspan='2' | |||||
---|---|---|---|---|---|---|
Group 1 | Group 2 | Group 3 | ||||
T3Col0 | T3Col1 | Table 3, Column 2 | T3Col3 | T3Col4 | T3Col5 | T3Col6 |
r0c0 | r0c1 | r0c2 | r0c3 | r0c4 | r0c5 | r0c6 |
r1c0 | r1c1 | r1c2 | r1c3 | r1c4 | r1c5 | r1c6 |
r2c0 | r2c1 | CSS 2.1 Property Table | r2c3 | r2c4 | r2c5 | r2c6 |
It makes a copy of the table's THEAD section. | r3c1 | r3c2 | r3c3 | r3c4 | r3c5 | r3c6 |
r4c0 | r4c1 | r4c2 | r4c3 | r4c4 | r4c5 | r4c6 |
r5c0 | The position and size of the THEAD copy will be adjusted when the window is resized. | r5c2 | r5c3 | r5c4 | r5c5 | r5c6 |
r6c0 | r6c1 | r6c2 | r6c3 | r6c4 | r6c5 | r6c6 |
r7c0 | r7c1 | r7c2 | r7c3 | This object is being discussed at the X forums. | I am an H2 | r7c6 |
r8c0 | r8c1 | r8c2 | r8c3 | r8c4 | r8c5 | r8c6 |
r9c0 | r9c1 | r9c2 | r9c3 | r9c4 | r9c5 | r9c6 |
rAc0 | rAc1 | rAc2 | The THEAD copy uses the same CSS class you provide for the static table. | rAc4 | rAc5 | rAc6 |
rBc0 | rBc1 | rBc2 | rBc3 | rBc4 | rBc5 | rBc6 |
rCc0 | rCc1 | rCc3 | rCc4 | rCc5 | rCc6 | |
rDc0 | rDc2 | rDc3 | rDc4 | rDc5 | rDc6 | |
rEc0 | rEc1 | rEc2 | rEc3 | rEc4 | The container can be a window object or scrollable Element object. | rEc6 |
rFc0 | rFc1 | rFc2 | rFc3 | rFc4 | rFc5 | Mozilla Developer Center |