xTableHeaderFixed

Ajaxified!

Demo 6

Adapting xTHF to an Ajax App

Select tables from the menubar.

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.