Scrollable HTML Table with fixed header for IE 7, IE 8, Firefox 3.5, Chrome

A lot of developers face a problem of creating a table with scrollable body and fixed header during their web application development tasks. There are several solutions which suite to different situations.

Oxagile software development company created a new solution which supports both IE7 and IE8 and is also suitable for Firefox 3.5 and Google Chrome.

Here is a demo:

Our idea is simple:

• We created a mark-up which contains two tables: Table 1 for header and Table 2 for body which look and act as a single table.

  

• We put both tables into a container which scrolls them horizontally.
• We put Table 2 for body into a container which scrolls it vertically.
• We created a container which simulates the scroll of the body and is positioned in the top right corner of visible content.
  1. Both tables and all their cells should have fixed width.
  2. You should always know the quantity of columns beforehand.
  3. Cells must have fixed height for IE7 (when you use some DOCTYPEs) and you should know the quantity of rows, as in some cases IE7 does not support document.documentElement.clientHeight property.
  1. Create header and body tables with fixed table and cell width. For example, if you have 10 cells, you should set the width of each cell to 100px and the width of the whole table to 1000px).
  2. Create a DIV-container, let’s name it “y-scroll”, which wraps Table 2 (the body-table).
  3. Set the width of the y-scroll container to be equal to the width of Table 2 plus the quantity of columns in Table 2.
     For example, if the width of Table 2 is 1000px and the quantity of columns is 10, the width of the container should be 1010px.

     Note: This amendment takes place only in the case when table border width is set to 1px.

  4. Set overflow style of “y-scroll” to: x – hidden, y – auto and max-height to be equal to the height of Table 2 visible content.
  5. Create a DIV-container, let’s name it “x-scroll”, which wraps both tables. Set the width of the scroll to be equal to the width of visible content. Set overflow style to: x – auto, y – hidden.

     Now you have a scrollable table, but there are two problems:

     • The header table is shifted 1px to the left.
       To fix this problem just wrap this table into a DIV-container. Name it “header-container”.
     • Vertical scroll appears only after you scroll the whole table horizontally.
       To fix this problem create a scroll which simulates the behavior of the real vertical scroll and is positioned at top right corner of Table 2 visible content.
  6. Create a DIV-container, let’s name it “fake-y-scroll-container”. Set position of this container to relative. We use this DIV as a container for absolute positioning of fake scroll. Fix the width of the container in the same way as for “x-scroll” and set overflow style to hidden.
  7. Create a DIV-container, let’s name it “fake-scroll” and put it into the “fake-y-scroll-container”. “Fake-scroll” should be positioned absolutely and have inner content height equal to the height of Table 2.

     To set the inner content height to be equal to Table 2 height, create an inner DIV-container, let’s name it “table-emulator” and set its height with JavaScript on page load:

     var tableEmulator = document.getElementById(’table-emulator’);

     var table = document.getElementById(’body’);

     //Set the height of inner content for fake scroll

     tableEmulator.style.height = table.clientHeight + “px”;

     var fakeScrollablePanel = document.getElementById(’fake-scroll’);

     //Position “fake-scroll” under table header.

     fakeScrollablePanel.style.top = document.getElementById(’header’).clientHeight + 2 + “px”;
  8. The next step is to synchronize the behavior of the real scroll and the fake scroll. Include the following JavaScript code into the page:
     var scrollablePanel = document.getElementById(’y-scroll’);

     var fakeScrollablePanel = document.getElementById(’fake-scroll’);

     scrollablePanel.onscroll = function (e)

     {fakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;}

     fakeScrollablePanel.onscroll = function (e)

     {scrollablePanel.scrollTop = fakeScrollablePanel.scrollTop;}

Restrictions and assumptions.

Development.

To create the mark up above, take the following steps:

That’s all! Play with CSS to improve the look and feel of the table and use it for any website development tasks!

Here is the Scrollable HTML Table with fixed header source code.