(Updated) 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 simple way to give users a scrolling table with fixed headers.

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.

Working Example:

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

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

62 Comments on “(Updated) Scrolling HTML Table with Fixed Header”

  1. Jim Wilcox Says:

    cool…

  2. Mateen Says:

    i m having a problem with scrolling table. I have made some additions to the height and width of the div. I applied in my project. sometimes the table’s data start down from the top, sometimes go off the view means go so down that it is out of the view. I think there is problem in div’s position. I tried but i didn’t came to any result. Any suggestions plz. it is urgernt.

  3. Randy Syring Says:

    Mateen,

    You will have to provide an example. I am not sure what you are doing based on your comment.

  4. David Dreistadt Says:

    Hi Randy,

    Thanks for your great work. It’s very helpful for my current project.
    It works under IE (6.0 and 7.0) but I have a problem under FireFox 2.0.
    If the content doesn’t fill the entire table, the table keeps the original size and the border down is displayed far below the last row. How can I automatically adjust the size according to the number of items ?

    As you guess, I’m a beginner in CSS writing ;-)

    Thanks by advance

    David

  5. Randy Syring Says:

    David,

    What you are seeing is expected behavior. In FF, the has to be given a height for the CSS to work, therefore the table will always remain that height even when it doesn’t have enough rows. However, if it is just the border that concerns you, then instead of putting the border on the table itself, you can put the border on the or elements. That way the bottom border of the table will appear to be where the last row is and the rest of the table will just appear as whitespace.

    That is about the most help I think I can give on this one.

    Randy

  6. Randy Syring Says:

    David,

    It appears that the Lord has been good to you! Take a look a look at this comment on my original post about this technique. I believe it solves your problem.

    https://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/#comment-33


  7. [...] THIS CODE HAS BEEN UPDATED!! THE CODE EXAMPLES HERE ARE OBSOLTE. PLEASE SEE MY POST FOR THE UPDATED VERSION. [...]

  8. David Says:

    Hi Randy,

    I really like your solution and have been using it.

    I just came up with a need for a fixed footer too and was just wondering if you have any ideas to extend your solution to provide a fixed footer along with your fixed header in a scrolling body.

    thanks

  9. Randy Syring Says:

    David,

    I got most of my ideas for my solution from here:

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

    The above link contains an example that contains a fixed footer. I bet it is possible to combined the two solutions without much trouble.

    Randy

  10. David Says:

    Hi Randy,

    The fixed footer example on that page doesn’t work for ie6, which I need.

    Anyways, if you find a way to do make a fixed footer, please let me know and I will share likewise.

    regards,
    David

  11. Dominik Grav Says:

    Doesn’t work in Opera 9.1, which is still a major browser. May you fix this, please?

  12. Randy Syring Says:

    Opera may be a major browser, but it only garners about 1.5% of the web community. I don’t have the time to troubleshoot this problem in Opera, sorry. If you end up finding a solution, please post back with it.

  13. Steve May Says:

    I’ve been looking for a decent solution for quite some time. Thanks for sharing. I’ve put your sample to use on one of my more complicated pages and have only one issue. My header row is 5 rows high (not a problem), and the first 4 columns have a rowspan of 4. The first “row” of these 4 columns appears correctly, but the lower 3 “rows” are transparent and missing the header text. The scrollable rows appear through this section of the header when scrolled.

    Could you offer a solution to this problem?
    Thanks,
    Steve

  14. Randy Syring Says:

    Steve,

    Please post a simplified test case. I then might be able to throw a few ideas at you.

  15. Steve May Says:

    Randy,

    I’ve greatly simplified my HTML to this. The actual page has 4 additional columns at the beginning with the same rowspan, all producing this same effect. I’m using IE6. Haven’t tried others yet.

    test

    /**/body div.scrollTableContainer table {
    width: 850px;
    }

    /* Modern browsers (but especially firefox ) */
    html>/**/body div.scrollTableContainer table>tbody {
    overflow: auto;
    /*height: 465px;*/
    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;
    }

    div.scrollTableContainer td {
    border-right: solid 1px #777777;
    border-bottom: solid 1px #777777;
    }

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

    .tblColHdr {background: lightblue;}
    –>

    Corporate ID
    Assay

    Version

    Result Type

    Concentration

    11

    22

    33

    44

    55

    66

  16. Steve May Says:

    Sorry, here it is …

    div.scrollTableContainer {
    overflow: auto;
    margin: 0px;
    position: relative;
    height: 120px;
    width: 850px;
    }

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

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

    /* Modern browsers (but especially firefox ) */
    html>/**/body div.scrollTableContainer table>tbody {
    overflow: auto;
    /*height: 465px;*/
    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;
    }

    div.scrollTableContainer td {
    border-right: solid 1px #777777;
    border-bottom: solid 1px #777777;
    }

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

    .tblColHdr {background: lightblue;}

    <div class=”scrollTableContainer”>
    <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
    <thead>
    <tr>
    <td class=”tblColHdr” rowspan=”4″ valign=”bottom”>Corporate ID</td>
    <td class=”tblColHdr”>Assay</td>
    </tr>
    <tr>
    <td class=”tblColHdr”>Version</td>
    </tr>
    <tr>
    <td class=”tblColHdr”>Result Type</td>
    </tr>
    <tr>
    <td class=”tblColHdr”>Concentration</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class=”row1″>1</td><td class=”row1″>1</td>
    </tr>
    <tr>
    <td class=”row1″>2</td><td class=”row1″>2</td>
    </tr>
    <tr>
    <td class=”row1″>3</td><td class=”row1″>3</td>
    </tr>
    <tr>
    <td class=”row1″>4</td><td class=”row1″>4</td>
    </tr>
    <tr>
    <td class=”row1″>5</td><td class=”row1″>5</td>
    </tr>
    <tr>
    <td class=”row1″>6</td><td class=”row1″>6</td>
    </tr>
    </tbody>
    </table>
    </div>

  17. Kalash Says:

    I have a problem regarding hiding of scrollbar in IE7. When I use the piece of code
    the horizontal scrollbar in the body of the table gets hidden in IE6 but it appears in IE7. . Anyone who can provide me a hint as why this is happening?

  18. Sanjay Says:

    This is coool but is it possible to extend it to freez the first column and keep the rest if the grid scrolling.
    This will be very used full when the horizontal scroll is very big.

  19. Randy Syring Says:

    Sanjay,

    I don’t know. Try it and find out. ;)

  20. Bryce Martin Says:

    I know this hasn’t been posted on for a while, but I thought I’d post a little something.

    This worked great. Like you Randy I too used ‘imaputz’ and ‘tampa’ to try and get this working. I did have it working with imaputz’s example in firefox 2.0 perfectly. But then I was thinking, all my users will be using IE6 (intranet application, the joy of being the programmer i get to use FF). So I started testing on IE6. I had a problem with my headers floating to the top of the page once I scrolled. Well my CSS started to get mangled when I was trying to find the culprit. So once again I searched for a simpler solution and low and behold I found this.

    Now, if you just copy and paste the code right into a CSS it gives you a very generic page, but with a few added styles to pretty it up it works great. As-is, the title bars are transparent and you can see the scrolling content behind them. Not a problem. I just added a little piece…

    /* make the TH elements pretty */
    thead th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 1px 1px;
    text-align: center;
    }

    and voila!

    Of course, I’m sure that this is all stuff that you guys have encountered and figured out but I thought I would just share in appreciation.
    By the way, I’m actually using 2 tables on the same page, using 1 class and this works great. I’ve also made each cell in the first column of my table to be clickable which spawns a unique popup window with information populated from a database.

    Thanks again Randy. If you have any questions, comments, or suggestions, please feel free to email me. BryceKMartin@gmail.com

  21. Paresh Says:

    This code works fine for simple html elements but if there is a select box in the table then it gets on top the header how to solve this problem

  22. RN Says:

    I am using IE and having problem to display the scrollbar. Can any one put full example which works for IE.

  23. Randy Syring Says:

    RN:

    The example posted above:

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

    works for me in both IE 6 and IE 7.

  24. Maurice Says:

    There is the code for a scrolling table with fixed head and footers with varying widths, that works with ie and ff in strict mode at
    http://scrolltable.twrc.org.uk/

    Maurice

  25. Shmuel Says:

    I realize this is more of a general CSS question than that of the scrolling table above, but I implemented the solution – successfuly, I may add. Thank you Randy – and it works in all three browsers. However, in IE7 (and maybe IE6) the table body’s rows scroll over the table header. I’m not using z-index’s but it’s AS IF the body has a higher z-index than the header. Thanks!

  26. Robert Says:

    Love the lightweight nature of the code. I did run across a small issue with it though. If you have a caption on your table the stuck table headers break completely. If you try to use a block level element inside the scrollable div wrapper the thing breaks as well.

    Just wanted to give you a heads as I was not able to get your code working in my current app because all of my tables have captions.

  27. Randy Syring Says:

    Guys,

    Thank you for all the comments. Unfortunately, this project is not something that I currently have the time to update or tinker with. However, keep the comments coming. Maybe sometime in the future I will have some time and then I can go back through the comments and try and find answers.

  28. Terry Shannon Says:

    I’ve been looking for a solution to scrolling a table in IE for a couple of days, and found this today. This code is working in the version of IE we are using.

    How do I examine the css code that is imported? View source just shows the @import rule. When I click on the validator link in IE, I think I’m seeing the non IE version and not the IE version?

    What is the way to view the scroll_table.ie.css file?

    Thanks,

    Terry

  29. Randy Syring Says:

    Terry,

    The @import rules are all relative to the page that imported them. Therefore, you can manipulate the URL in your browser, and just download the file directly:

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

    Hope that helps.

  30. Prashant R Says:

    Thanks!!!! The Code was of Great Help!!!

  31. Torgil Says:

    No comments for a while I see…

    Anyways, I have messed around with this scroll table demo, and turned my head inside out over the left position pixel shift, because the IE expression for left worked only 7 out of 10 times on page reload, and if I had more than one table usin the scroll function on one page, the first one would work but not the others.

    But studying the css made me think and do some experiments, that actually came out to not only find the reason for the header pixel shift on scroll, but also eliminating the need for the left expression:

    The reason for this pixel shift is that you have defined a 1px border on the TABLE element in the css. If you set the TABLE border to 0px and instead define the borders on the TH and TD elements, the need for the left expression to fix the bug is not needed, since the pixel shift disappears.

    The effect of thin borders achieved from the TABLE element border is just as easily achieved by setting borders for the TH and TD’s first-child different from the rest of the TH’s and TD’s so there is no design or layout loss by skipping the border on the TABLE element. But the strange pixel shift bug for the header is totally gone.

    Keep up the good work, and I hope that this comment helps those struggling with the IE bug as I have.

  32. Randy Syring Says:

    Torgil:

    I haven’t had a chance to confirm yet, but if what you are saying works, that is excellent!

    Thank you for coming back and sharing what you found!

  33. Tushar Says:

    Hi Randy,

    I’ve similar requirement in my project but somewhat different… Header that would not scroll upward, but would scroll sideways. From given solution it gives vertical scrollbar, not horizontal scroll bar… Could you please advise the direction ?

  34. Thomas Says:

    Randy — trying to implement this code, and unfortunately it breaks in IE8 (at least up to beta 2). If I run IE8 with the developer tools in IE7 mode, it does just fine.

    I was even able to determine that your table width IE-only setting could be safely incorporated with your other IE only settings in a separate CSS file, so that Firefox doesn’t throw any “undefined CSS tag” warnings into the error console.

    Also, setting the TBODY height to an arbitrary number has a strange effect, if there is only one row present when displayed under FF — the row stretches to the height of the TBODY. Any thoughts on how to deal with that situation?

    Great work, overall.

  35. Thomas Says:

    Oh, yes, yet another issue: I have a few scrolling tables present inside another scrollable DIV — it’s a modal window that I built. When I scroll that DIV, the headers, under IE7, stay in place, while the rest of the DIVs content move along with the scroll action.

  36. Randy Syring Says:

    Thomas,

    Thanks for reporting the IE8 problem. I haven’t worked with IE8 yet. Thank you also for your other observations. Unfortunately, I don’t have much time to work on this project right now. If you (or anyone else) would like to incorporate changes into the code, feel free and send me the result or a patch. I am happy to post an updated copy here. I just don’t have time to mess with it myself right now.

    Thanks!

  37. Rups Says:

    Thanks.. Setting the TBODY height to an arbitrary number has a strange effect, if there is only one row present when displayed under FF — the row stretches to the height of the TBODY. Any thoughts on how to deal with that situation?

    Great work, overall.

  38. jj Says:

    it looks like in ff3, if you only have a few rows, the less you have the taller they get, has anyone found a fix for this?

  39. jj Says:

    nevermind, looks like if you set the tr height to a percentage, it will fix the problem in ff3, thanks :)

    table.dataTable tr {
    height: 14%;
    }

  40. Randy Syring Says:

    JJ,

    Thanks for the tip.

  41. Harri Luostarinen Says:

    Hi

    This seems to be that what I need, but I can’t get it to work other than as child of body. I mean that div scrollTableContainer can’t be inside of any other elements than body. I need to get it inside of other div and in that other table cell (whole row), but it doesn’t showup.

    Here is some of that what I’m trying to do:

    text
    other
    etc…

    Station
    Date
    Status
    Num.

    KABC
    09/12/2002
    Submitted
    0

    Regards
    Harri

  42. Harri Luostarinen Says:

    Hi

    This seems to be that what I need, but I can’t get it to work other than as child of body. I mean that div scrollTableContainer can’t be inside of any other elements than body. I need to get it inside of other div and in that other table cell (whole row), but it doesn’t showup.

    Here is some of that what I’m trying to do:

    text
    other
    etc…

    Station
    Date
    Status
    Num.

    KABC
    09/12/2002
    Submitted
    0

    Regards
    Harri

  43. Nat Ring Says:

    Torgil and Randy,

    Thanks for your solution. This proved to work out very well for my needs.

    Torgil – By eliminating the table border and taking out the left:expression in the IE styles I was able to get rid of the 1px table shift. You were right, thanks!

    I ran into an issue with text resizing breaking the table widths by adding new scrollbars on the containing div. I came up with a workaround – I will post this later.

  44. yvorl Says:

    Works fine under IE and Firefox.

    Doesn’t work under Opera, Chrome, Safari….I know they’re minor browsers but it would be nice to see a real cross browser solution for this.

    Anyone?

  45. k Says:

    Not work in IE8

  46. Jim Reisert Says:

    I got the code to work, but my example has over 90 rows, and the CSS/HTML example seems to break down (I can only see/scroll the first 10 rows or so). I’m using Firefox 3.5. Any idea what I can change in the code to fix that?

    - Jim

  47. Ron Says:

    The top row in IE8 isn’t staying in place. As you scroll the top header goes with it. It works flawlessly in firefox though. Does anybody have any ideas for a way to make this work with IE8?

    Thanks

  48. Adrian Says:

    yeah, doesn’t work in IE 8. but works when i click on the “compatibility view” icon. Anyone knows how to make it work without?

  49. Len Yabloko Says:

    Thank you for useful post!

    Can you suggest any way to make a first column fixed (outside of scrolling)?

  50. k Says:

    no worky in ie8

  51. anjsag Says:

    Add
    inside tag in the file . the solution works in IE.

    Please sent a solution nto work in safari or opera

  52. anjsag Says:

    Add this meta tag in head tag as :
    meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
    This will enable to work in IE8.

    Any solution for opera & safari??

  53. anand Says:

    how can i replace the below code in js
    thead.th{
    TOP: expression(this.parentNode.parentNode.parentNode.parentNode.autoTop)
    }


  54. Is there a way to put the scrollbar outside the table?

  55. Vanco Says:

    Doesn’t work in Chrome

  56. Marina Says:

    Hi Randy,

    thank you so much! I’ve modified my code and it works fine in IE8 and FF. I had to comment the height out for FF and include the style in my actual table:

    This way the height changes based on a size of a result table.

    thank you again!

  57. Marina Says:

    thank you so much! I’ve modified my code and it works fine in IE8 and FF. I had to comment the height out for FF and include the style in my actual table:
    “”

    This way the height changes based on a size of a result table.

    thank you again!

  58. archimede Says:

    The example page doesn’t work (the header is not fixed) in FF 5.0 and Chrome 12.0.742.112. Somebody knows a fix for this?

    TIA.

    Alessandro

  59. tinks Says:

    I cant find the source? where can I download? thanks randy.


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: