October 26, 2009
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 what it looks like:
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.
Restrictions and assumptions
- Both tables and all their cells should have fixed width.
- You should always know the quantity of columns beforehand.
- 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.
Development
- 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.
- Create a DIV-container, let’s name it
y-scroll
, which wraps Table 2 (the body-table). - 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.
- Set overflow style of
y-scroll
to: x – hidden, y – auto andmax-height
to be equal to the height of Table 2 visible content. - 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.
- The header table is shifted 1px to the left. To fix this problem just wrap this table into a DIV-container. Name it
- 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 forx-scroll
and set overflow style to hidden. - Create a DIV-container, let’s name it
fake-scroll
and put it into thefake-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 ittable-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";
- 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;}
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.