Table Body Scroller

Recently there has been a spate of newsgroup discussions on the subject of scrolling the bodies of table while the header cells remain in a fixed position. Obviously there is a demand for being able to do this when a large table of data is used in a page with an otherwise heavily controlled layout.

In the most recent browsers fully supporting CSS2 it is possible to split a table up into THEAD and TBODY divisions and set the CSS overflow property on the TBODY to "scroll" or "auto" and specify a size for the TBODY element. That almost works, but unfortunately invariably puts up a horizontal scroll bar to give access to the part of the TBODY concealed behind any vertical scroll bar. When the TBODY is scrolled horizontally the THEAD section stays still so the columns no longer line up. This is generally seen as unsatisfactory.

The other significant problem with this CSS approach is that Internet Explore 6 does not understand the instruction, and if a specific height is set on a TBODY it arranges for all of the TR elements in the TBODY to inherit that height. This leaves the presentation in IE poor (though the height problem can be fixed by specifying a CSS height for the TR elements). In a commercial context any technique which does not work in IE, and even produces poor presentation, is not going to be acceptable.

If it were practical to achieve a scrolling table body with fixed headers using CSS alone then it would be better not to involve javascript in the process at all. But since it is not I thought I would have a go at writing a script that would scroll the body of a table while the headers remained fixed in alignment with their respective columns and rows. I chose the more complex task of having the table scroll both vertically and horizontal, with row and column headers because it would be easier to cut this version down to just vertical or horizontal scrolling if wanted.

The script works by the manipulation of the HTML on the page, providing clean degradation in browsers that do not support the required functionality. The effect of that degradation can be witnessed by re-loading the page with a link including a query string that disables the scrolling of the table, or disabling javascript and re-loading this page.

Javascript Type-converting Equality (row == col)

	undefined	null	true	false	-1.6	-0	+0	1	1.6	8	16	16.8	112e-2	-Infinity	+Infinity	NaN	"" (empty string)	"-1.6"	"0"	"1"	"1.6"	"8"	"16"	"16.8"	"112e-2"	"010" (Octal)	"0x10" (Hex)	"0xFF" (Hex)	"-010"	"-0x10"	"xx"	Object 1	Object 2	function(){ return 0; }	function(){ return; }
undefined	true	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
null	true	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
true	false	false	true	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
false	false	false	false	true	false	true	true	false	false	false	false	false	false	false	false	false	true	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
-1.6	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
-0	false	false	false	true	false	true	true	false	false	false	false	false	false	false	false	false	true	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
+0	false	false	false	true	false	true	true	false	false	false	false	false	false	false	false	false	true	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
1	false	false	true	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
1.6	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false
8	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false
16	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	true	false	false	false	false	false	false	false	false
16.8	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false
112e-2	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false
-Infinity	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
+Infinity	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
NaN	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
"" (empty string)	false	false	false	true	false	true	true	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
"-1.6"	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
"0"	false	false	false	true	false	true	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
"1"	false	false	true	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false
"1.6"	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false
"8"	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false
"16"	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false
"16.8"	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false
"112e-2"	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false
"010" (Octal)	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false
"0x10" (Hex)	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false	false
"0xFF" (Hex)	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false	false
"-010"	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false	false
"-0x10"	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false	false
"xx"	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false	false
Object 1	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false	false
Object 2	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false	false
function(){ return 0; }	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true	false
function(){ return; }	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	false	true

The table is a listing of the boolean results produced using the javascript type-converting equality operator ( == ), comparing the column headers (as javascript source code) with the row headers. The original table is certainly too big to be comfortably viewed in any browser window without scrolling. The script implementation is designed to be a fluid as the page it is used on so the system will adapt to the size of the browser window in which it is used (try re-sizing the window) .