Cross-Browser.com

xTable is an unobtrusive table enhancement. It freezes the table's first row (or THEAD) and first column while the rest of the table is scrollable. If the table has a CAPTION it is removed and inserted above the frozen header.

Disable Javascript and refresh the page to see what the tables look like without the enhancement.

Related Demos:

xTable Demo 2 - Fills the window width and height. See the related forum thread.

xTableHeaderFixed - Supports colspan'd cells in the thead.

4 Nov 10

No code changes but added demo 2 and added some documentation to the xtable.xml file.

24 Jul 09

This demo has been in several discussions (cool!), but it seems my notes below may have misled people to think their html table must contain nested tables - it doesn't. The nested elements are all created dynamically. In the html all you need is a regular table.

16 Mar 07

When I first wrote xTable I had ideas for making it support the locking of any number of rows and cols - but I didn't have time to go that far with it. I would like to rewrite that object - some day perhaps.

Use a DOM Inspector to see how the dynamically created elements are structured. The table is removed and in its place is inserted a DIV (class xtRoot) which contains three DIVs. They are absolutely positioned within the relatively positioned xtRoot. Those three are the frozen row container, the frozen col container and the table container.

The frozen row and col containers have "inner containers" in order to implement simulated scrolling. An inner container has a DIV for each cell found in the original row or col (which eventually gets removed). In each of these "cell DIVs" is a one-celled table. I didn't, and still don't, like inserting a table for every cell in the frozen row or col - but it was a compromise - I was running out of time to put into it. Getting a frozen cell's contents to retain its original styling meant it had to be in a table cell. Getting the frozen cells to align and scroll in sync with the table proved to be quite tricky ;-) especially getting it to work cross-browser - so that also resulted in some compromises.

30 Jan 07

Code update.

This one has no caption.

T2	Excepteur	sint	occaecat cupidatat	non proident	sunt	in culpa	qui	officia	deserunt	mollit	anim	id est	laborum	Mike's	X Library
T2Row0	Lorem ipsum dolor sit amet	r0c2	r0c3	r0c4	r0c5	r0c6	r0c7	r0c8	r0c9	r0cA	r0cB	r0cC	r0cD	r0cE	r0cF
Excepteur	r1c1	r1c2	r1c3	r1c4	r1c5	r1c6	r1c7	r1c8	r1c9	r1cA	r1cB	r1cC	r1cD	r1cE	r1cF
X Lib	r2c1	r2c2	r2c3	r2c4	r2c5	r2c6	r2c7	r2c8	r2c9	r2cA	r2cB	r2cC	r2cD	r2cE	r2cF
occaecat	r3c1	r3c2	r3c3	r3c4	r3c5	r3c6	r3c7	r3c8	r3c9	r3cA	r3cB	r3cC	r3cD	r3cE	r3cF
T2Row4	r4c1	r4c2	r4c3	r4c4	r4c5	r4c6	r4c7	r4c8	r4c9	r4cA	r4cB	r4cC	r4cD	r4cE	r4cF
T2Row5	r5c1	r5c2	r5c3	r5c4	r5c5	r5c6	r5c7		r5c9	r5cA	r5cB	r5cC	r5cD	r5cE	r5cF
T2Row6	r6c1	r6c2	consectetaur adipisicing elit, sed do eiusmod tempor	r6c4	r6c5	r6c6	r6c7	r6c8	r6c9	r6cA	r6cB	r6cC	r6cD	r6cE	r6cF
cupidatat	r7c1	r7c2	r7c3	r7c4	r7c5	r7c6	r7c7	r7c8	r7c9	r7cA	r7cB	r7cC	r7cD	r7cE	incididunt ut labore et dolore magna aliqua.
T2Row8	r8c1	r8c2	r8c3	r8c4	r8c5	r8c6	r8c7	r8c8	r8c9	r8cA	r8cB	r8cC	r8cD	r8cE	r8cF
non proident	r9c1	r9c2	r9c3	r9c4	r9c5	r9c6	r9c7	r9c8	r9c9	r9cA	r9cB	r9cC	r9cD	r9cE	r9cF
T2RowA	rAc1	rAc2	rAc3	rAc4	rAc5	rAc6	rAc7	rAc8	rAc9	rAcA	rAcB	rAcC	rAcD	rAcE	rAcF
sunt in culpa	rBc1	rBc2	rBc3	rBc4	rBc5	rBc6	rBc7	rBc8	rBc9	rBcA	rBcB	rBcC	rBcD	rBcE	rBcF
qui	rCc1	rCc2	rCc3	rCc4	rCc5	rCc6	rCc7	rCc8	rCc9	rCcA	rCcB	rCcC	rCcD	rCcE	rCcF
T2RowD	rDc1	rDc2	rDc3	rDc4	rDc5	rDc6	rDc7	rDc8	rDc9	rDcA	rDcB	rDcC	rDcD	rDcE	rDcF
deserunt	rEc1	rEc2	rEc3	rEc4	rEc5	rEc6	rEc7	rEc8	rEc9	rEcA	rEcB	rEcC	rEcD	rEcE	rEcF
id est laborum	rFc1	rFc2	rFc3	rFc4	rFc5	rFc6	rFc7	rFc8	rFc9	rFcA	Ut enim ad	minim veniam,	rFcD	rFcE	rFcF
T2Row10	r10c1	r10c2	r10c3	r10c4	r10c5	r10c6	r10c7	r10c8	r10c9	r10cA	r0cB	r10cC	r10cD	r10cE	r10cF
T2Row11	r11c1	r11c2	r11c3	r11c4	r11c5	r11c6	r11c7	r11c8	r11c9	r11cA	r1cB	r11cC	r11cD	r11cE	r11cF
T2Row12	r12c1	r12c2	r12c3	r12c4	r12c5	r12c6	r12c7	r12c8	r12c9	r12cA	r2cB	r12cC	r12cD	r12cE	r12cF
X	r13c1	r13c2	r13c3	r13c4	r13c5	r13c6	r13c7	r13c8	r13c9	r13cA	r3cB	r13cC	r13cD	r13cE	r13cF
Powered	r14c1	r14c2	r14c3	r14c4	r14c5	r14c6	r14c7	r14c8	r14c9	r14cA	r4cB	r14cC	r14cD	r14cE	r14cF
Javascript	r15c1	r15c2	r15c3	r15c4	r15c5	r15c6	r15c7	r15c8	r15c9	r15cA	r5cB	r15cC	r15cD	r15cE	r15cF
Toys	r16c1	r16c2	quis nostrud exercitation ullamco laboris nisi ut aliquip	r16c4	r16c5	r16c6	r16c7	r16c8	r16c9	r16cA	r6cB	r16cC	r16cD	r16cE	r16cF
!!!	r17c1	r17c2	r17c3	r17c4	r17c5	r17c6	r17c7	r17c8	r17c9	r17cA	r7cB	r17cC	r17cD	r17cE	r17cF
xTable	ex ea commodo consequat.	r18c2	r18c3	r18c4	r18c5	r18c6	r18c7	r18c8	r18c9	r18cA	r8cB	r18cC	r18cD	r18cE	r18cF
xSplitter	r19c1	r19c2	r19c3	r19c4	r19c5	r19c6	r19c7	r19c8	r19c9	r19cA	r9cB	r19cC	Duis aute irure dolor in reprehenderit	r19cE	r19cF
xSelect	r1Ac1	r1Ac2	r1Ac3	r1Ac4	r1Ac5	r1Ac6	r1Ac7	r1Ac8	r1Ac9	r1AcA	rAcB	r1AcC	r1AcD	r1AcE	r1AcF
xAnimation	r1Bc1	r1Bc2	r1Bc3	r1Bc4	r1Bc5	r1Bc6	in voluptate velit esse cillum	r1Bc8	r1Bc9	r1BcA	rBcB	r1BcC	r1BcD	r1BcE	r1BcF
xTreeMenu	r1Cc1	r1Cc2	r1Cc3	r1Cc4	r1Cc5	r1Cc6	r1Cc7	r1Cc8	r1Cc9	r1CcA	rCcB	r1CcC	r1CcD	r1CcE	r1CcF
xToolbar	r1Dc1	r1Dc2	r1Dc3	r1Dc4	r1Dc5	r1Dc6	r1Dc7	r1Dc8	r1Dc9	r1DcA	rDcB	r1DcC	r1DcD	dolore eu fugiat nulla pariatur.	r1DcF
Table 2, Row 1E	r1Ec1	r1Ec2	r1Ec3	r1Ec4	r1Ec5	r1Ec6	r1Ec7	r1Ec8	r1Ec9	r1EcA	rEcB	r1EcC	r1EcD	r1EcE	r1EcF
T2Row1F	r1Fc1	r1Fc2	r1Fc3	r1Fc4	r1Fc5	r1Fc6	r1Fc7	r1Fc8	r1Fc9	r1FcA	rFcB	r1FcC	r1FcD	r1FcE	r1FcF