(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:
February 22, 2007 at 9:51 am
cool…
March 1, 2007 at 3:02 am
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.
March 1, 2007 at 10:03 am
Mateen,
You will have to provide an example. I am not sure what you are doing based on your comment.
March 13, 2007 at 7:06 am
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
March 13, 2007 at 9:37 am
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
March 13, 2007 at 10:28 pm
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.
http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/#comment-33
March 13, 2007 at 10:41 pm
[...] THIS CODE HAS BEEN UPDATED!! THE CODE EXAMPLES HERE ARE OBSOLTE. PLEASE SEE MY POST FOR THE UPDATED VERSION. [...]
March 20, 2007 at 1:02 pm
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
March 20, 2007 at 1:07 pm
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
March 20, 2007 at 3:55 pm
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
March 30, 2007 at 9:02 am
Doesn’t work in Opera 9.1, which is still a major browser. May you fix this, please?
March 30, 2007 at 9:46 am
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.
March 30, 2007 at 3:13 pm
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
March 30, 2007 at 3:30 pm
Steve,
Please post a simplified test case. I then might be able to throw a few ideas at you.
April 3, 2007 at 1:42 pm
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
April 3, 2007 at 1:48 pm
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>
April 6, 2007 at 2:14 am
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?
April 23, 2007 at 4:34 am
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.
April 23, 2007 at 11:44 am
Sanjay,
I don’t know. Try it and find out.
October 18, 2007 at 3:12 pm
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
December 6, 2007 at 7:02 am
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
January 14, 2008 at 5:23 pm
I am using IE and having problem to display the scrollbar. Can any one put full example which works for IE.
January 14, 2008 at 5:54 pm
RN:
The example posted above:
http://rcs-comp.com/blog/scrolling_table/
works for me in both IE 6 and IE 7.
January 15, 2008 at 4:31 am
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
February 12, 2008 at 1:25 pm
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!
February 29, 2008 at 5:27 pm
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.
March 1, 2008 at 10:23 am
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.
April 15, 2008 at 4:03 pm
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
April 21, 2008 at 12:12 pm
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.
August 22, 2008 at 5:24 am
Thanks!!!! The Code was of Great Help!!!
September 17, 2008 at 4:25 am
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.
September 17, 2008 at 9:01 am
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!
October 12, 2008 at 11:14 pm
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 ?
October 22, 2008 at 9:31 am
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.
October 22, 2008 at 9:35 am
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.
October 22, 2008 at 10:21 am
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!
February 11, 2009 at 12:14 am
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.
February 20, 2009 at 4:36 pm
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?
February 20, 2009 at 4:53 pm
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%;
}
February 20, 2009 at 5:02 pm
JJ,
Thanks for the tip.
March 4, 2009 at 7:10 am
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
March 4, 2009 at 7:26 am
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
March 12, 2009 at 8:47 am
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.
May 28, 2009 at 5:52 am
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?
June 12, 2009 at 7:30 am
Not work in IE8
June 28, 2009 at 8:57 pm
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
October 15, 2009 at 11:56 am
no worky in ie8