Scrolling HTML Table with Fixed Header

Scrolling Table Screen Shot

Incompatibilities:

This solution was developed over four years ago.  As noted in the comments, this solution does not work for IE 8, FF 5, and webkit browsers.  It is no longer being developed, so I suggest looking for alternate solutions.

Some History:

On a recent project it was necessary for me to find a solution to display a bunch of rows in an HTML table that scrolled and had fixed headers. I, of course, started with a Google search and based my first solution of the technique identified here:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Advantages:

  1. Valid HTML and CSS
  2. Tested on Multiple Browsers
  3. Has a “Bullet Resistant” version that uses Javascript to overcome some problems.

Disadvantages:

  1. In Firefox, the width of the <th> and <td> elements are not the same. This requires that each and every column have fixed width (which is quite annoying to say the least). If the table had a lot of columns, this solution would probably not work.
  2. Does not work in IE 7.

Another solution I found was here:

http://home.tampabay.rr.com…nonscroll-table-header.html

I ended up having to tweek the code a little to get it working correctly in IE 7 while still displaying with pixel perfect accuracy in Firefox and IE 6. The above had problems in non-quirks mode in IE with the fixed header not moving when the page was scrolled.

Advantages:

  1. Works in IE 6, IE 7, Firefox (tested in 2.0.0.1, but assuming it works in 1.5.x too).
  2. Does not require the column widths to be specified.
  3. Valid HTML with no extra table or header definitions required.

Disadvantages:

  1. Has an intermittent problem with fixed header moving left or right 1px in IE.
  2. Uses the proprietary IE expression() function in the CSS for fixing the header in IE.
  3. Uses a few CSS hacks (http://www.webdevout.net/articles/css_hacks.php).
  4. If the CSS is embedded directly in the page (i.e. in a <style> block), then IE will give the user an “active content” warning and the scrolling table will not work until they click “allow blocked content”.

HTML:

<div class=”scrollTableContainer”>
<table class=”dataTable” cellspacing=”0″>
<thead>
<tr>
<th>Station</th>
<th>Date</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>

</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>

<tr>
<td>WRRR</td>

<td>02/19/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>

</tbody>
</table>

</div>

CSS:
div.scrollTableContainer {
height: 285px;
overflow: auto;
width: 970px;
margin: 15px 0 0 0;
position: relative;
}

/* The different widths below are due to the way the scroll bar is implamented */

/* All browsers (but especially IE) */
div.scrollTableContainer table {
width: 952px;
}

/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainer table {
width: 970px;
}

/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainer table>tbody {
overflow: auto;
height: 250px;
overflow-x: hidden;
}

div.scrollTableContainer thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
/* fixes the header being over too far in IE, doesn’t seem to affect FF */
left: 0px;
}

/*prevent Mozilla scrollbar from hiding cell content*/
div.scrollTableContainer td:last-child {padding-right: 20px;}

Code Update:

I made some improvements to the code and posted them, but people continue to come to this page, so I have posted the same information here too.

Improvements:

  • Fixed the 1px “shift” noticed in IE when scrolling the table content
  • Conditional comments include the invalid “expression” syntax for IE only. That means we have valid CSS 3.0.

Continuing Disadvantages:

  • The “expression” syntax in the IE style sheet is technically Javascript. Therefore, anyone using IE with Javascript turned off will not get the fixed headers, the scrolling table will work.
  • Not compatible  w/ modern browsers: As noted in the comments below, the current implementation had been reported to have problems in IE 8 and webkit browsers (Chrome, Safari).  As well as Firefox 5.

Working Example (Demo):

http://rcs-comp.com/blog/scrolling_table/

Bitbucket Repository:

I have create a Bitbucket repository with the code for this project: http://bitbucket.org/rsyring/scrolling-html-table-fixed-header/src

About these ads
Explore posts in the same categories: CSS, HTML, XHTML

53 Comments on “Scrolling HTML Table with Fixed Header”

  1. Kirk Says:

    Thanks for the solution, but there seems to be a problem. I downloaded the zip file, extracted the html and css files and then brought the html file up in IE7. The table header does not stay fixed. It scrolls out of view when I scroll the div scrollbar. Any idea what’s wrong?

  2. Randy Syring Says:

    Kirk,

    Thank you for letting me know. The included code, as well as my example CSS, had one of the important lines commented out. I have fixed this in the ZIP file as well as the code example itself. Please let me now if you continue to have problems.

  3. Joe Says:

    Thanks for the idea, I had come up with some thing very similar but couldn’t get it working quite right in IE till I came across your site and saw the idea of putting the top: expression offset on the entire header row. Works now, thanks a lot.

  4. Randy Syring Says:

    Joe,

    I am glad I could help. Keep in mind that the expression offset is not valid CSS. If I could get around it, I would. So, if you ever find a better solution, please come back and let me know.


  5. [...] Scrolling HTML Table with Fixed Header Please checkout my original post on this topic for more in depth information.  In the end, this seems to be a relatively clean and [...]

  6. Bill Hardin Says:

    Randy,

    Your scrolling table w/fixed header was just what I needed for my project. I didn’t need sortable headers, or any other fancyness – just a header that would not scroll upward, but would scroll sideways.

    I did have trouble in Firefox though. The trouble was here:

    /* Modern browsers (but especially firefox ) */
    html>/**/body div.scrollTableContainer table>tbody {
    overflow: auto;
    height: 250px;
    overflow-x: hidden;
    }

    When I commented out the line ‘height: 250px;’, however, everything worked fine. This line was making the rows of my table 250px high. Commenting out this line seemed to have no other detrimental effect, either in FireFox, or IE.

    As a side note: I also got the ActiveWidget grid to work with my project, but I found that it was quite slow upon querying my database and decided against it for this reason. Your table queries as fast as the simplist HTML table. Very nice solution! Thanks!

    Bill

  7. Randy Syring Says:

    Bill,

    You are welcome. Thanks to you too, your comment solves a problem someone else was having over on my other blog entry:

    https://rcswebsolutions.wordpress.com/2007/02/17/updated-scrolling-html-table-with-fixed-header/#comment-31

  8. murf Says:

    kudo to you!!!

    i appreciate the “tightness” of hte setup. It reads well and is very simple and elegant!!

    THANKS!!

  9. Treyva Says:

    Thanks for this article.

    Is there anyway to make the caption and tfoot elements static in IE7 as well, or am I just stuck until IE starts interpreting the CSS tbody height: ??px; assignment the same way FF does?

  10. Randy Syring Says:

    Treyva:

    Not sure and I unfortunately don’t have any time right now to test or make improvements. Sorry I couldn’t be of more help. You will just have to research/test and see what you can come up with.

    Randy

  11. RN Says:

    Hi Randy,

    Can you please post the code of scrolling_table.ie.css
    RN

  12. Scott Says:

    Randy,

    The solution seems to work fairly well, however I’m having a problem in FF. I have a max-height as well as a border set on the div.scrollTableContainer so that if the data doesn’t take up the entire height it shouldn’t be the full set height.

    /* Modern browsers (but especially firefox ) */
    html>/**/body div.scrollTableContainer table>tbody {
    overflow: auto;
    height: 250px;
    overflow-x: hidden;
    }

    If I change the height to max-height, the div.scrollTableContainer collapses around the content of the table but doesn’t allow the tbody to scroll anymore if there is more data extending beyond the height set. The only scrollable part at this point becomes the div.scrollTableContainer which also scrolls the header.

    Any suggestions?

  13. Randy Syring Says:

    Scott,

    Sorry, i don’t have any suggestions.

  14. Hiran Karunananda Says:

    Randy,

    This is very useful article. Thanks!
    but Horizontal scroll bar activate in the Grid i came up with following problem in Firefox!

    Appear two Vertical scrollbars. one is scrolling with grid header. other one scrolling without header. so what i need to do here is remove header scrolling part.

    Could u have any comments to this matter?


  15. [...] post got us most of the way [...]

  16. hanna Says:

    where can I find your download zip? I couldn’t find it in your page.

    thanks

  17. Ashley Says:

    Keep it up man.,

  18. jOHN Says:

    Works in IE7/FF3 but not Chrome.

  19. deep Says:

    Hi friend.Happy New Year firstly.
    Your work on this matter really superb.no doubt.
    But, I want to apply this in my JSP page,where the values are coming from database.I have used struts.
    I have already tried with your code provided.Datas are coming,all the formatting works well.But the header is not fixing!
    I am attaching the portion where the header & column values are there.Please help.Thanks:

    Sl No.
    Code
    Name
    Budget Estimate
    Revised Estimate
    Proposal By Dte
    Sanction By FD
    Allotment To Dte
    Allotment To Others
    LOC
    Expense
    Supplementary Grant

  20. elderadviser Says:

    I really appreciate this code and the script is incredibly useful.. The problem I am having is I used this just to make a table scrollable, but it does not work in IE7… The fact that it’s not a data table shouldn’t matter… Or does it? is there anything that I need to do to the CSS? could this also be the settings on my IE, and when someone doesn’t have their scripting enabled does this default to just the full table or does it cut off?

    I’m sure this is a ton of gibberish that doesn’t make sense but I would really use some input.

  21. kashinath Says:

    Hi Randy,

    Your solution is working fine in both IE and FF. But there is a problem which quite boggled me!.. Since I have tried everything in my knowledge and failed to come up with a solution. The header is fixed. And the table is scrollable.

    The problem is my table elements are selectable. So that if a user selects the contents of the table an event should occur. Now when the user scrolls down to the last element in the table and selects that line. The header disappears. And when I scroll up and select a top row it appears again.

    I could use some input here. Since this has been boggling me for days.

  22. Rob Says:

    The example on: http://rcs-comp.com/blog/scrolling_table/

    Stopt working in IE8, unfortunately IE8 still doesn’t support the nice CSS solution.

  23. Nob Says:

    hi, is there a zip file or a link where i can download the exemple??

  24. John Says:

    Hi,
    I’m really interested in using this in my site but I can’t locate your zip file & if I use the code on this page it doesn’t work. There are a few id’s missing ‘mythead’ & ‘mytr’ in the CSS.

    Any help please??

    Thanks.

  25. David Haake Says:

    I used your css as is except for sizing to my page and it worked great. Then I tried to add a 4 right borders on the scroll page to group the 12 check boxes into 4 columns. It put the border to the far right outside of the scroll. Is it possible to affect the td’s inside of the scroll?

  26. Mickey Says:

    Does not work in chrome 3 either…

  27. Noel Says:

    Can somebody provide a zip file to that example? I cant make it work

    Thanks in advance

  28. Pratyusha Says:

    Hi..
    Thanks for the solution.. However, it is not working in IE8… can it be fixed to work in IE8 as well?
    Also, can you let me know from where i can download the zip.
    Thanks

  29. Keith Says:

    This is a great solution. I have made a few modifications to get it working with IE8. I have tested
    this on IE6, IE7, IE8, and FF3 and it all works well. However it does not appear to work in Safari or Chrome. Does anyone have any thoughts on that? The example web pages also does not work in safari or chrome.

  30. Mike Says:

    Randy,

    Your solution has been an excellent addition to an application I am writing in PHP, mySQL. Eveything displays fine in IE, but with Firefox, the rows adjust their height based on how many rows there are. If I only have to rows of data, the rows split the height of the scrolling table. If I have enough rows to fill it, the rows are normal height. With IE, the height is always perfect.

    Is there a solution you have for this, and has anyone else run across this issue?

    Again, great work on this and I am very grateful.

    Mike

  31. Fox Says:

    doesn’t work on Opera either,
    basically it only works with Firefox…

  32. Bobbie Says:

    Hi Randy,

    Is there a way we add frozen columns to this solution. I was looking for frozen columns & few dropdowns in the column headers.

    Thanks
    Bobbie

  33. Randy Syring Says:

    @Mike: no, I had the same problem when I was using this solution.

    @fox: it works with older IEs, but obviously, getting it to work in IE 8 is needed. Unfortunately, I can not put any time into this at the moment.

  34. Sandeep Says:

    Please do provide the ie8 fix. if anyone have.. thanks in advance.

  35. bln Says:

    check this one !

    table with flexible width and fixed header !

    http://www.tablefixedheader.com

    • Randy Syring Says:

      It is a JavaScript (JQuery) solution…but I am thinking more and more that JavaScript is the way to do something like this, not CSS. At least, not until we can get better cross-platform support.

  36. Sandeep Says:

    thanks bln its working gr8 as i required.

  37. Robin Says:

    Thanks for this, I’ve tried a number of these solutions and this is the only one that just worked straight out of the box. Shame it only works on firefox though

  38. Shahib Says:

    Hi Dude,

    I have implemented the Fixed header functionality without CSS hacks. I hope it will be useful for you too :-)

    s7u.blogspot.com/2010/09/fixed-header-footer-with-out-css-hacks.html

    Please let me know if you have any suggestions for me :-)

    Regards,
    Shahib

  39. Shahib Says:

    Hi,

    I have implemented fixed header footer functionality. I have put all the versions in my blog. Current version has dynamic height and width depending on System.

    http://s7u.blogspot.com

    Please let me know if you have any suggestions for me.

    Regards,
    Shahib

  40. Arun Says:

    @guys,

    It works fine in FF, IE 7. in IE 8 the header is getting scroll any suggestions pls help me with this :(

    Thanks
    Arun

  41. Riccardo Says:

    Hi,

    First of all, I want to thank for the useful solution.

    I implemented it on my page, and it worked well, until I upgraded Firefox to the new version (4.0.1).
    Now it does not work anymore.

    I tried to fix it, but unsuccessfully.

    Any suggestion?

    Thank you

  42. Randy Syring Says:

    Ricardo,

    Yah, I have this too:

    https://bitbucket.org/rsyring/scrolling-html-table-fixed-header/issue/3/dosenot-work-with-firefox-4

    But see the note on that issue. I am really not developing this project anymore. If someone wants to fix the bugs and let me know, I can repost the solution here.

  43. Ekta Says:

    I did tried lots of script and JQuery library, but if it’s a big table with lots of rows few of this scripts make it slow, few script does not works in some browser. At last I found the best way to create the scrollable table with fixed row or column. I am using it in my huge ERP application, it is really fast and works great on Mozilla Firefox, IE, Opera and Google chrome. To see the detail please go through following link
    http://ektaraval.blogspot.com/2011/05/creating-scrollable-table-with-fixed.html

  44. Ertan Says:

    doesnt work FF5, any idea?

  45. Jimmy Says:

    I tried your zip but its not working in Windows. But it works for me in Linux. Any solution will be appreciated.

    Thanks
    Jimmy


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: