Click here to Skip to main content
13,347,168 members (59,634 online)
Click here to Skip to main content
Add your own
alternative version


12 bookmarked
Posted 28 May 2007

Fix headers, footer, and left columns of an HTML table

, 28 May 2007
Rate this:
Please Sign up or sign in to vote.
How to fix headers, footer, and left columns of an HTML table by calling a JavaScript function.


This code helps fix headers, footer, and left columns of an HTML table. The code uses the different possibilities of JavaScript for dynamically adding HTML components and playing with CSS styles.

This works really well on IE 6 (other versions not tested) but with Mozilla / Firefox I didn't manage to obtain the same results: I had to downgrade some functionalities.

If somebody wishes to migrate the IE code so that it works with Mozilla / Firefox, it would be great (I have no time to do it for the moment). In fact, the major problems are that CSS expressions are available only with IE and that relative / absolute position doesn't work the same in Mozilla / Firefox.


The concept is simple: the table is inserted in a DIV, which offers the possibility to have scrollbars. Header, footer, and left columns are positioned relatively, and CSS expressions make them always visible. The DIV and IFRAME are positioned to hide invisible cells and HTML components (IFRAME for select boxes, DIV for everything else).

The code is not simple, and requires JavaScript experience to be improved. But analyzing it is a good way to learn the many possibilities offered by this powerful language.

Using the code

Using this library is very simple : all you have to do is call a JavaScript function on an existing table, without modifying existing code (except adding an HTML ID on your table, if not present).

var t = new ScrollableTable('myScrollTable', height, width, numberLeftColumns);

The included Zip contains the JS library, and an example HTML page presenting several use cases.


This code was inspired from this article:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

France France
No Biography provided

You may also be interested in...

Comments and Discussions

Questionproblem in using your code. Pin
prabhu46014-Apr-14 21:03
memberprabhu46014-Apr-14 21:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 29 May 2007
Article Copyright 2007 by massamany
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid