Fixed Table Headers, Demo 0

Description

Note: this is deprecated, see the latest version of xTableHeaderFixed.

xTableHeaderFixed is an unobtrusive table enhancement. It makes a copy of the table's THEAD section. While the table is visible in the window the THEAD copy will be fixed to the top of the window. So you can scroll up and down in a long table and the header will always be visible. The position and size of the THEAD copy will be adjusted when the window is resized.

For modern browsers it uses "position:fixed" to fix the header at the top of the window. As a compromise I assume any browser which implements the native XMLHttpRequest object is a modern browser. If you are viewing this page with IE6 then you are getting the Catfish version. Other browsers will not get the enhancement.

Demo 1

Table 1 Caption
T1Col0T1Col1T1Col2T1Col3T1Col4T1Col5T1Col6
r0c0r0c1xTableHeaderFixed is an unobtrusive table enhancement.r0c3r0c4r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1r2c2r2c3r2c4r2c5r2c6
r3c0r3c1r3c2r3c3r3c4r3c5r3c6
r4c0r4c1r4c2r4c3r4c4r4c5r4c6
r5c0r5c1r5c2r5c3r5c4r5c5r5c6
r6c0r6c1r6c2r6c3r6c4r6c5r6c6
r7c0r7c1r7c2r7c3r7c4r7c5r7c6
r8c0r8c1r8c2r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2rAc3rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc2rCc3rCc4rCc5For modern browsers it uses "position:fixed" to fix the header at the top of the window.
rDc0rDc1rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4rEc5rEc6
rFc0rFc1rFc2rFc3rFc4rFc5rFc6

Demo 2

This one has no caption.

T2Col0T2Col1T2Col2T2Col3T2Col4T2Col5T2Col6
r0c0r0c1r0c2r0c3r0c4r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1r2c2r2c3r2c4r2c5r2c6
r3c0r3c1r3c2r3c3r3c4r3c5r3c6
r4c0r4c1r4c2r4c3r4c4r4c5r4c6
r5c0r5c1r5c2r5c3r5c4r5c5r5c6
r6c0r6c1r6c2r6c3r6c4r6c5r6c6
r7c0r7c1r7c2r7c3r7c4r7c5r7c6
r8c0r8c1xTableHeaderFixed is currently very experimental!r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2rAc3rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc2rCc3rCc4rCc5rCc6
rDc0rDc1rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4rEc5rEc6
rFc0rFc1rFc2rFc3rFc4rFc5rFc6

Demo 3

Table 3 Caption
T3Col0T3Col1T3Col2T3Col3T3Col4T3Col5T3Col6
r0c0r0c1r0c2r0c3r0c4r0c5r0c6
r1c0r1c1r1c2r1c3r1c4r1c5r1c6
r2c0r2c1r2c2r2c3r2c4r2c5r2c6
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
r7c0r7c1r7c2r7c3r7c4r7c5r7c6
r8c0r8c1r8c2r8c3r8c4r8c5r8c6
r9c0r9c1r9c2r9c3r9c4r9c5r9c6
rAc0rAc1rAc2As a compromise I assume any browser which implements the native XMLHttpRequest object is a modern browser.rAc4rAc5rAc6
rBc0rBc1rBc2rBc3rBc4rBc5rBc6
rCc0rCc1rCc2rCc3rCc4rCc5rCc6
rDc0rDc1rDc2rDc3rDc4rDc5rDc6
rEc0rEc1rEc2rEc3rEc4If you are viewing this page with IE6 then you are getting the Catfish version.rEc6
rFc0rFc1rFc2rFc3rFc4rFc5rFc6

Testing

25 Jan 07 - These test results are from Charles Belov. Thanks very much!

Windows

Firefox 1.5.0.9: works perfectly.
Firefox 2: works perfectly.
IE6Windows: works perfectly.
IE7Windows: works perfectly.
Mozilla 1.7.13: collapses the header cells (but this is an out-of-date browser).
Opera 9.01: works perfectly.
Opera 9.01 small screen mode: does no significant harm; the additional layers show up at the bottom of the page.
MSNTV Viewer 2.8: does no harm.

OS X Macintosh

Opera 9.01: works perfectly, if sluggishly.
Opera 9.01 small screen mode: does no significant harm; the additional layers show up at the bottom of the page.
Firefox: works on letting up on the mouse button; acceptable.
iCab (narrow browser windows): cuts off part of last column.
iCab (wide browser windows): does no harm.
Safari 2: Is still getting the column widths wrong, although it gets the table width approximately right.