Free Quote
Blog

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 what it looks like:

table_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.

Table with scrollable body

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 and max-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.
  • 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.
  • 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";
    
  • 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.

  • Oct 28th, 2009 at 3:03 am
    Andy

    What a noob, I’ve done a lot better even for all browsers including IE6. Even cell resizing and infinite scroll as well. It was hard but it works.

  • Oct 28th, 2009 at 5:30 pm
    Aleh

    Thank you for this solution. It has helped a lot.

  • Nov 16th, 2009 at 6:20 pm
    Hugo

    Ok, Andy:
    then show us your (better) example, if you are so proud of it.

  • Dec 3rd, 2009 at 8:53 am
    Sankar

    Hey, That’s a great solution. But its not helping me for the percentage width table layout :( Can you give a solution for percentage table also ?

  • Dec 21st, 2009 at 3:20 pm
    Student_101

    Ya, Andy – it has been more than one year … do you still have your better example?

  • Feb 2nd, 2010 at 4:54 pm
    Holger

    That’s a nice and light solution!
    Thank you!

  • Feb 18th, 2010 at 4:10 pm
    Greg

    First this method is currently the best way to make a table scroll w/fixed header, but…

    Has anyone tried a scroll wheel with this demo? IE scrolls smooth while Firefox and Chrome are slow/jumpy. And if you use the scroll wheel as a button, it works in IE, Chrome, but not Firefox. Of those who answered ‘yes’, any idea how to fix it?

  • Apr 5th, 2010 at 12:12 pm

    Dear Raj,
    If you want to add a fixed footer you should create one more table (for footer content) and put it under div#y-scroll. This table should have fixed cells width as table for header.
    Also we’ve added the link to demo and source where left scroll jumping is fixed. Here is the difference between the new and old mark-up:
    1. Header, Footer, and Content tables are wrapped with div tags
    2. We’ve created one more fake scroll (x-scroll) that we’ve put under all these tables
    3. JavaScript synchronizes scrolling of header, footer, content tables and fake scroll.

  • Oct 6th, 2010 at 5:08 am
    Quincho

    Greg, you need to attach an event handler (callback function) to the mouse wheel with javascript.

    I’ve implemented an alternative solution using the mootools javascript framework but it took me a while to create it.

    Just let me tell that the solution exposed in this blog is cleaner (less javascript code) than mine and both do exactly the same. So, if you don’t need a complex functionality in your website (like sorting columns, resizing columns, filter, search, etc) I’d recommend to use this solution (html + CSS) instead of using a whole javascript class or framework.

  • Jan 15th, 2011 at 8:42 pm
    Boston15

    Is there a way to lock 1 or more left hand columns?

  • May 13th, 2011 at 3:59 pm
    Shankar

    Hi,

    I really like this structure. I want to make the first four columns in the table frozen keeping the header fixed. Could you please let me know how can i achieve this.

    Thanks,
    Shankar

  • Jun 10th, 2011 at 9:14 pm
    Zafar

    Hi OXADeveloper,

    This is good stuff and it helped me solve some UI problem I was facing. I am using vertical scroll with fixed header but for a table in which rows can be highlighted. So when cursor moves on data of any row, that row will be highlighted by changing background.

    THE ISSUE: As soon as the row is highlighted on mouseover the scroll doesn’t happen using mouse-wheel (scroll locked due to highlighting). Please note that I have extended the scrollable area to entire table by increasing the emulator table width (whereas in your example it is restricted to using scroll-bar ).

    This is specific requirement I have wherein the table can be scrolled from anywhere on the table area.

    Please help me find a work around so that it will be scrollable even after row is highlighted. I can send you code snippet with this problem if needed.

    Thanks,
    Zafar Hakim

Leave a Comment
Your email will not be published