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

• Download source code - 4.25 KB

Introduction

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.

Background

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.

History

This code was inspired from this article: http://www.webtoolkit.info/scrollable-html-table.html.