Click here to Skip to main content
Click here to Skip to main content

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

, 28 May 2007 CPOL
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.

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.

License

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

Share

About the Author

massamany

France France
No Biography provided

Comments and Discussions

 
Questionproblem in using your code. Pinmemberprabhu46014-Apr-14 20:03 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141030.1 | Last Updated 29 May 2007
Article Copyright 2007 by massamany
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid