Skip to main content  
  Easy400   |       iSeries home
About it
Installation & Operation 
Bulanadi's Plugin
DataTables Plugin

Fixed Header Tables  
by Giovanni B. Perotti

Usually, when an HTML table containing many rows does not fit in the page height, a vertical scroll bar is generated on the right side of the page, allowing users to display the lower rows of the table. In scrolling down, however, the table headers are no longer visible, so users may need to scroll back up the page to check column headings. Users would by far prefer to have the column headers kept steady at the top of the screen, while the scroll bar scrolls just the table rows.

Tables with such a property are called Fixed Header Tables.

To implement a Fixed-Header-Table technique you need something special.
There are two cathegories of solutions: those based on "pure" CSS, and those based on jQuery
(jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. There are thousands of jQuery plug-ins available on the web that cover a wide range of functionality such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows,and so on).

If you search Google for "Fixed Header Table", you will find a number of solutions.

  • The ones based only on CSS try to take advantage from two HTML tags, <thead> (Table Head) and <tbody> (Table Body).
    Though these techniques used to be very efficient, they are no longer working, as those tags are no longer accepted as valid container delimiters by most browsers.
  • The ones based on jQuery are generally very powerful. However they
    1. need to be carefully tested, as each one has its own weaknesses and limitations
    2. slow down the browser, which has to fetch the code from the HTTP server and run it against the table to make up the desired picture. Of course, the time spent for this is very sensitive to the number of rows in the table. So, you may come up with solutions that provide fixed headers only when the total number of rows does not exceed a given threshold.

Two of the JQuery solutions I tested are worth to be reported:

Read about them in the next pages.

Installation & operation

You do not need to install any code from those two mentioned solutions.

This utility named FIXHDTAB installs all the material needed to run both them.
Of course, a given HTML page can support just one of the two techniques.

To perform the download, press the Download link and select it for download.
The following HTTP directives are needed (take off the blanks after character "<" and before character ">"):

  • To enable the Bulanadi's plugin:
      Alias /FixedHeaderTable /FixedHeaderTable
      < Directory /FixedHeaderTable >
       Options None
       allow from all
      < /Directory >
  • To enable the DataTables plugin:
      Alias /DataTables /DataTables
      < Directory /DataTables >
       Options None
       allow from all
      < /Directory >
contact us contact us