CSS Scrollable Table
July 28th, 2005The application I’m spending most of my time on these days is very data-centric. We display large amounts of data in tabular form for the users to sort, search, and click through.
When dealing with many rows of data, when you scroll down the page, your table’s column titles scroll off the page. It’s easy to lose your place in the data. So I wanted to find a nice generic way of keeping the table’s header row on the screen, while still allowing the content to scroll. I wanted something that was CSS based and was simple to implement. I tried several different approaches before settling on the one shown here.
There are several other solutions around the web but almost all of them fail on on critical point:
I don’t know how many columns I will have, or how wide they will need to be.
A lot of other solutions look good, but fall apart when dealing with practical problems. I needed a table that I could give any width to. And I could define that width in pixels or percent.
Finally, an important note: This solution isn’t perfect (are they ever?) but it’s pretty good. I’ve wound up with an unnecessary horizontal scrollbar (usually). I don’t like it, but attempts to get rid of it get complicated… and I’m going for simplicity here.
Moving on…
Here’s the final product:
| Numbers | Letters | Symbols |
|---|---|---|
| total numbers | total letters | total symbols |
| 111 | aaa | @@@ |
| 222 | bbb | ### |
| 333 | ccc | $$$ |
| 444 | ddd | %%% |
| 555 | eee | ^^^ |
| 666 | fff | &&& |
| 777 | ggg | *** |
| 888 | hhh | +++ |
| 999 | iii | ??? |
So let’s have a quick look at the code. The table is pretty basic:
<div class="scrollWrapper">
<table class="scrollable">
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
<th>Symbols</th>
</tr>
</thead>
<tfoot>
<tr>
<th>total numbers</th>
<th>total letters</th>
<th>total symbols</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>111</td>
<td>aaa</td>
<td>@@@</td>
</tr>
<tr>
<td>222</td>
<td>bbb</td>
<td>###</td>
</tr>
…continued for all rows…
<tr>
<td>999</td>
<td>iii</td>
<td>???</td>
</tr>
</tbody>
</table>
</div>
The only thing I’ve added that might be unusual are the <thead>, <tfoot> and <tbody> tags. They’re discussed in the W3C spec and are good tags to get in the habit of using. For a standard table, they don’t necessarily do anything. But they are really handy when it comes to applying CSS.
I’ve also applied a classname of scrollable to the table. This way I can have several tables on a page, and choose which ones I want to scroll. Finally I wrapped the whole thing in a <div> and gave it the classname scrollWrapper. This is a necessary evil to get IE running. Figures right?
That’s it for the HTML. Nice and (mostly) symantic.
I’m going to break this up into two sections now. The IE solution, and the Standards Compliant (SC) solution. The SC solution is neat and tidy, and frankly so is the IE solution. But they’re different. I’ll handle both separately, then combine them.
For both solutions we’re scrolling something. We want it to look like we’re scrolling just the body of the table. In the SC solution, we do in fact just scroll the body, but in IE we scroll the whole table then go back and stop the header from moving.
So Firefox (and other SC browsers) do something like this:
IE does something like this:
The same, but different…
Ok, onto the CSS. First we’ll look at the Standards Compliant way to do it. Take that <tbody> tag that holds all the content we want to scroll, give it some max-height, and tell it to scroll anything that overflows outside that height.
table.scrollable tbody{
max-height:150px;
overflow:scroll;
}
That’s it. Done. It won’t be fancy, but that’s all it takes to scroll your table nicely.
Moving on to the IE version. IE ignores that <tbody> styling. It won’t do the overflow there at all. So instead, let’s apply the overflow to that <div> wrapper, and limiting it’s height to the same 150px used in the SC version. I’m also going to float the wrapper to the left. This allows me to handle the width of my table independently. (An impotant requirement for my application).
div.scrollWrapper{
float:left;
height:150px;
overflow:scroll;
}
This makes the table scroll inside the <div>, but the header scrolls away too. So add this bit of CSS:
table.scrollable th{
position: relative;
background:#f7f7f7;
}
table.scrollable{
margin-right:16px;
}
This positions the header relatively inside the table, and it doesn’t scroll. (Might be taking advantage of a but here, but it works.) I also added a background color to the header, because without it, the content the scrolls under the header shows through. And finally, I added 16px of margin to the table itself. This pushes the table away from the scrollbar. Without it, the scrollbar disappears under the header.
Now of course the problems. Version 1 works in SC browsers, and just displays as a regular table in IE. But the IE version doesn’t work in SC browsers (the headers scroll away).
So the mixed solution. The trick was to let IE see only the IE solution, and SC browsers only see the SC solution. For simplicity’s sake, I love the !important modifier. IE ignores it, and SC browsers stand at attention when they see it. So it allows me to tell different browsers to do different things. So I used it here. One note:anything with the !important modifier has to go before any items that apply the same style.
Here’s the bare bones solution. It’s a combination of the solutions above, with the additions in bold.:
div.scrollWrapper{
float:left;
height:150px;
overflow:visible !important;
overflow:scroll;
}
table.scrollable{
margin-right:16px;
}
table.scrollable th{
position: relative;
background:#f7f7f7;
}
table.scrollable tbody{
height:150px;
overflow:auto;
}
So all I did was combine the two but then tell SC browsers to make the outer <div>’s overflow visible. IE won’t see this, and it will scroll.
Done. This should do the trick. It works in IE (I’ve only tested IE 6) and in Standards Compliant browsers.
As I mentioned, the only thing I don’t like about this solution is the horizontal scrollbar. It ain’t pretty. But I have yet to find a good way to get rid of it. I can live with it for now.
An important point that took me a while to sort through. If you use border-collapse:collpapse; when styling the table, Standards browsers will get screwy. Try it out. For some reason the content will scroll, but the cell borders will not. Annoying, but an easy thing to work around. So to be safe I add border-collapse:separate; to the table. This prevents any potential inheritence problems.
All that is left to do is clean it up a bit style-wise, and you get the table I started with above. The final CSS:
div.scrollWrapper{
float:left;
overflow:visible !important;
overflow:scroll;
height:150px;
}
table.scrollable{
width:450px;
margin-right:0 !important;
margin-right:16px;
border-collapse:separate;
}
table.scrollable th{
border-top:1px solid #999999;
border-left:1px solid #999999;
border-bottom:1px solid #999999;
padding:5px;
background:#f7f7f7;
position: relative;
}
table.scrollable tbody{
height:150px;
overflow:auto;
}
table.scrollable tr{
height:0px;
}
table.scrollable td{
border-left:1px solid #999999;
border-bottom:1px solid #999999;
text-align:center;
}
If you want to avoid a horizontal scrollbar on IE, try using the overflow-Y property instead of overflow.
Whaddya know… I’ve wasn’t aware of the overflow-y property. I tested something like this:
div.scrollWrapper{
float:left;
overflow:visible !important;
overflow:none;
overflow-y:scroll;
height:150px;
}
And it seems to work fairly well (in IE only).
It looks like mozilla plans to support this though. Seems good to me.
Just in case someone else is as dumb as me, it is important that you include the doctype at the start of your page:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
It took me 2 hours non-stop strugeling to figure it out.
Thanks you for the nice code & explanation.
My previous comment applicable to IE 6.0 sp2.
Works on FF without doctype.
Willie - very good point. I should have said that explicitely. Sorry for your 2 hours!
I’ve added a bit to note this in the more recent pretty forms article that has this same requirement.
I have a similar problem that I need to solve, but in my example, the table and surrounding div must be 100% of the containing page/div/etc.
If you don’t use your 450px fixed size, the table header overlaps the scrollbar. How can we fit the header into the wrapping div such that the header doesn’t overlap and hide the top of the scrollbar?
So I figured it out….
Since my table and wrapper div cannot be a fixed size, I must use width:100% for the wrapper div and table. This causes a problem as the table header overlaps the scrollbar. Another problem is how the table is partially obscured by the vertical scrollbar, causing a horizontal scrollbar to appear.
This solution will enable a 100% wrapper div and table to be used, eliminating the requirement for a fixed table.scrollable.
1. Give your wrapping div a unique ID. In this example i use ’scrollWrapper’ since its the same as the class name.
2. Remove the fixed-width from table.scrollable and replace it with the following:
table.scrollable{
width: expression(document.getElementById(’scrollWrapper’).scrollWidth); }
This uses the IE-specific CSS Expressions to size the table width to its parent element scrollWidth. This automatically takes the vertical scrollbar into account.
viola.
Ron - Very nice. A slick addition. thanks.
Well, it doesn’t work in my Opera 8.5 (Linux)…
Testing it with FF1.5.
Out of the box it doesn’t work (even with the Doctype), but with a litle messing around…
Change the styles:
remove the overflow’s for the div.scrollWrapper
for tbody to also have a height:150px;
Then it works - reasonably.
The only problem with this I can see is for wide data - horiz scroll of header and footer don’t happen :(
In actual fact you can get away with this as the basic css for the whole thing (with FF1.5):
div.scrollWrapper
{
height:150px;
}
table.scrollable tbody
{
height:150px;
max-height:150px;
overflow:auto;
}
table.scrollable th
{
position: relative;
}
Nothing more was needed. Ok, it’s not pretty, but the flourishes of colour and other styles can be added to this basic model. (HTML didn’t change)
Dave: Thanks for this. I haven’t had the chance to pull down 1.5 yet - so this is particularly interesting. Will be intersting to see how other tweaks hold up.
Dave is right about Firefox 1.5, but that stylesheet will fail in Internet Explorer, Mozilla, and previous versions of Firefox.
To make the original style sheet work on all these browsers, make a single addition to the class table.scrollBody:
height:150px;
Otherwise, firefox will apparently ignore max-height.
Correction:
‘… that stylesheet will fail in…’
should read ‘… Dave’s stylesheet will fail in…’
New Document
.odd{background-color: white;}
.even{background-color: ButtonFace;
border-color:black;
border-right: 1px dotted #ccc;
}
.ss-scrollResults{
OVERFLOW: auto; WIDTH: 200px; color:ButtonFace;
scrollbar-arrow-color:brown;
scrollbar-track-color:white;
scrollbar-shadow-color:grey;
scrollbar-face-color:ButtonFace;
scrollbar-highlight-color:grey;
scrollbar-darkshadow-color:brown;
scrollbar-3dlight-color:ButtonFace;
}
div.scrollWrapper{
float:left;
overflow:visible;
overflow:scroll;
height:100px;
}
table.sortable{
width:300px;
margin-right:0 ;
margin-right:16px;
border-collapse:separate;
}
table.sortable TH{
border-top:1px solid #999999;
border-left:1px solid #999999;
border-bottom:1px solid #999999;
padding:5px;
position:relative;
}
table.sortable tbody{
height:10px;
overflow:auto;
}
table.sortable tr{
height:0px;
}
table.sortable td{
border-left:1px solid #999999;
border-bottom:1px solid #999999;
text-align:center;
}
.ColumnHeaders
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
VISIBILITY: visible;
OVERFLOW: hidden;
COLOR: black;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: lightgrey;
}
function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName(”tr”);
for(i = 0; i
ID
NAME
SAL
OCCUPATION
1
SACHIN
5000
CLERK
2
MEBIN
10000
PROGRAMMER
3
ROSE
9000
BPO
4
SUCY
50000
MANAGER
5
CHIN
5000
CLERK
6
SAm
50000
eng
7
FAHIM
5000
CLERK
I TRIED YOUR CODE AND ITS NOT WORKING FOR ME CAN U PLS HELP ME !
YOUR CODE IS TOO EXPLINATRY
hi , i found ur code good and quite explainatry. but for it does work i want to make the th fixed and allow no scrolling like shown in the example but i m using IE and want to make it work for this browser.
plz can u help
urgent
Amritha,
I had a look at your code, and it looks like you just missed a few items (those “!important”) bits are important!
I reassembled your code here. Just view the source of of that page. It’s all there.
It works in ffx and IE 6. Hope this helps.
The header does not scroll horizontally with the rest of the table. Is there an easy way to fix this?
Howdy from TX! This topic is fascinating to me - I’m always looking at good ways of implementing grids. Unfortunately, as of today, the example on this page does not work in IE 6. The grid headers seem to scroll. Just thought I’d mention that. Thanks for sharing!
I am trying to allow my header and footer to stay static while everything else scrolls inside.
I would like for the width of the whole page to be 995px, but I want the height of the page to automatically match the browser’s viewable dimensions due to varying displays.
I believe RON has solved this for the width, but I am new, and I have yet to follow his instructions successfully. Please HELP!
No scroll bars (it’s broken) at all in IE7 beta 2. It just shows the entire table. I like the transparent background in the content.
Am working on something similar. am trying to get a scrollable table where only the body scrolls but not the header or footer. Embedding the overflow style directly in the tbody tag (overflow-x: auto; overflow-y: scroll;) works like it’s supposed to in FireFox 1.5.0.4, but in IE… damn, why can’t IE be compliant, AND THEN try to get fancy.
Does anybody know if IE7 will fix this compliancy issue?
I sort of like your solution, you really are trying to make the best of a silly situation, but it feels too much like a hack for IE (and it sort of looks like it too!).
Hey peeps,
Have tried for about 4 hours now. This is a bit of a cheat, but I think that the most broad-based approach (i.e. same code works with IE6+ and FF1.5+) would actually be to create 3 stacked tables:
Factor
Short Description
Long Description
Available?
1
EA
EACH
Yes
2
PR
PAIR
Yes
12
DOZ
DOZEN
Yes
20
SCR
SCORE
Yes
100
CTN
CARTON
Yes
1,000
PLT
PALLET
Yes
10,000
CON
CONTAINER
Yes
1
Yes
Sorry previous post didn’t work right. Code all got scrubbed (well done :)).
The idea is to create 3 stacked tables: 1 header, 1 body, and 1 footer.
Set all the relative widths to be the same for each corresponding element, i.e. 100% table width, col1=20%, col2=20%, col3=50%, col4=10%, etc, etc.
Then put the whole body table into the “div” section with the appropriate overflow style.
Both IE and FF approximate the same results without the overhead of “forcing” IE to sumbit to CSS.
Here’s hoping the next version of IE, *might* implement tbody correctly.
Marcus,
Your final solution is a good one. I’ve used that myself a few times as well. The problems I’ve had with it (I’m sure you’ve hit these) are:
1. you gotta build a bunch of tables. Not a problem, but not really symantically pleasant either. But I can happily forgive this.
2. here’s where I’ve had real trouble.. The header can get out of alignment with the body. For example, say your first column is 100px wide, and your header text is “city”. Then in the body table, the city name
“Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch” appears (that’s a real city’s name!). It’ll make your first cell far more than 100px, and now your headers won’t line up with your table.
If your data is pretty controlled, and #2 isn’t in issue, than this technique works great. But #2 has always kept me from using this fix…
This is one of those problems that should just be easy.. shouldn’t it?
I’m dealing with displaying a table with a very wide dataset (also there can be much variation in the widths). I’ve been using a basic scrollable div tag solution with a fixed width and height. I would like to be able to place a percentage based width so that it would adjust to different resolutions and display as much of the table as possible. An implementation on firefox works fine, but IE extends the page beyond the window forcing horizontal scrolling at page level. Any suggestions?
example code is at my site
Brad,
I’m on a mac, so don’t have ready access to IE, but…
Every time I run into % width issues in IE, it’s because of IE’s screwy box model. 100% width plus padding and/or margin will result in something more than 100% wide (causing browser horizontal scrolling). It looks like you have margin on the BODY tag - and that might be what is causing IE to blow out.
(without IE I’m kind of flying blind, but it’s worth a look I think)
Is not working with IE plz ensure before you put anything in to web site
Pawan,
You gotta be more specific! Last I checked, this worked on IE 6 on WinXP. Where are you seeing this broken?
Hi,
I couldnt get this to work in both IE(6.0.2900) and FF (1.5.06). FF seems to render ok but when I change the heights to something like 650 IE displays each row as 650px!!
I have added
table.scrollable tr{
height:0px;
}
to my style and it works fine in IE now.
Hi all,
I have a problem with the table header that unfortunately is driving me nuts and I just can’t seem to figure it out. I’m using IE 6.0.
Here is how to reproduce the problem:
Add this style:
tr.highlight {
background-color: gold; }
Add this code to each TR in your TBODY:
onclick=”this.className=’highlight’;”.
Each TR should look like this:
<tr onclick=”this.className=’highlight’;”>
Test the page. Scroll down to the last TR in your table (with the scrollbar all the way down) and click anywhere on the row. Check how the header shifts up the “scrollTop” amount of pixels. If you don’t see the header, (shifted way up from viewport) scroll up to the first one, click on the TR again and check how the header comes down to its initial position. Play around with other TR’s. The trick is to move the scollbar down/up and click on any row. Every X number of pixels “shifted” with the scrollbar movement equals to the number of pixels the header shifts.
Any ideas? I will APPRECIATE A LOT any help.
Thanks guys/gals.
Manolo Farfan.
I’m looking at your final product in both Firefox and IE 6 and the problem seems to still be there. For your table in IE 6, the header and footer do not stay stationary while the body scrolls. They scroll along with the body. Is this suppose to happen with the table shown above? The one that you say is your final product?
This example does not work with IE7.
Any fixes?
to get rid of horizontil scroll in FF & IE
change
div.scrollWrapper{
float:left;
overflow:visible !important;
overflow:scroll;
height:150px;
}
table.scrollable tbody{
height:150px;
overflow: auto;
}
to
div.scrollWrapper{
float:left;
overflow-y:visible !important;
overflow-y:scroll;
height:150px;
}
table.scrollable tbody{
height:150px;
overflow: -moz-scrollbars-vertical;
}
i have this solution working, but I’m having the same problem as Manuel Farfan (Post Aug 18). In I.E. when setting a ruler against a row or sorting on click of the header, the header is moving to the actaul top of the table (disappearing).
Manual does a great job of explaining this.
Does anyone have a solution ?
I found a solution :
table.scrollable th{
position: relative;
top: expression(document.getElementById(”scrollWrapper”).scrollTop-2);
}
will fix the IE issue reported by Manual.
Hi All,
I must say I like the solution, it is quite a simple one in comparison to some of the others I have seen.
The difficulty I’m having is actually centering the whole lot: I have a ’scrollable table’ actually nested in another table cell. If I set the padding-left of the parent cell, I can manually nudge the scroller in, but I want it to auto-center.
I am on IE6, and have been trying various combinations of text-align and margin: auto.
Any help would be much appreciated!
Nick.
Hello all, I’ve been trying to tackle the scrollable tbody for quite some time.
You see, having a fixed height tbody is simple, as many of you have pointed out. You even tackled the liquid width problem. However, many of you use “max-height”, but this simply does not work (firefox). I am trying to get a tbody to take a max-height of 300px. If I only specify max-height: 300px, it doesn’t work. Why? Because for some reason, the height of the tbody is not being calculated correctly. Even if the tbody is 350px, it is being calculated as 250px by the browser so it is not limiting the height at all.
If I specify height: 300px, it works just fine. But, when I have less than 300px height worth of data, there’s a huge blank spot.
It has been pointed out on other sites that you must make tbody a block (display: block) in order for max-height to take effect. This is true, but it completely screws the table and is a very bad solution.
Has anyone figured out a way to implement a max-height? I’m almost willing to accept a javascript solution, but there must be a way to do this with CSS!
Nevermind, I found my answer.
Firefox 1.5 has a bug, max-width/min-width does not apply to ANY table element (table-cell, table-row, table-body, etc). That is because of a loosely worded spec in the CSS 2.0 specs.
CSS 2.1 DOES allow for min/max-width/height for tbody. However, it does not allow max/min-height for cells, or max/min-width for rows.
Unfortunately, nobody is going to fix it in 1.5, we just have to wait for 2.0 and hope everyone upgrades :(
only works on IE6.x
for fixed THEAD
table.scrollable thead {
position:relative;
top:expression(this.offsetParent.scrollTop)
}
for fixed TFOOT
table.scrollable tfoot {
position:relative;
top:expression(this.offsetParent.clientHeight - this.offsetParent.scrollHeight + this.offsetParent.scrollTop)
}
Patrick,
This is an elegant solution, thanks! However, I’m restricted from using DOCTYPE=Strict, as it will break other developer’s code on the pages I wish to place a fixed-header table. Can you discuss why IE requires Strict DTD for this solution to work, and what can be done to implement this without using DOCTYPE=Strict?
James,
Without the DOCTYPE declaration, the browser enters what is usually called ‘quirks mode’. This basically allows it to ignore the stringent CSS compliancy rules, and render the page anyway.
If the pages you are working on require that the browser is in quirks mode, I presume they are either old, or the developers are not too concerned with web standards. It would be more advisable to update the pages to render properly in standard mode - but I am sure that will be even more work!
As for quirks mode compatability, has anyone else tried to ‘fix’ this for quirks mode? I am not sure it’s possible.
Nick.
Hi guys and gals,
I am too forced to use quirks mode :( but even with the ’strict’ doctype I’m having trouble with this in Firefox 1.5. The verticle scrollbar eats into the edge of the table shaving some of the last column off. Does anyone know how I can offset the scrollbar 16px? Any comments gratefully received.
Ben
Hi everyone,
I’m having the same problem as Ben right now - the final column’s data is partially obscured in Firefox 1.5+ by the vertical scrollbar. Any ideas? margin-right has no apparent effect in SC browsers :(
Many emails, a bunch of good comments - this thing needs an update!
I have something working, and would love to get some of your thoughts on it. I’ll update this shortly…
Argghh, I’m having problems with this in IE7 as well. Can’t get the scrollbars to turn on. Anybody have a fix for that yet?
Thanks!
-Jonah
to get rid of the horizontal scrollbar i use this css for tbody:
overflow-x:hidden;
overflow-y:scroll:
and add an extra row with a width of about 30px .. 40px to the table. Works fine for me (having a huge matrix of checkboxes).
Marc
Can I have the code for this scrolling table with a fixed header? I am new to this javascripts and I dont know where to add
or
table.scrollable tbody{
max-height:150px;
overflow:scroll;
}
since it directly displays the code on the browser.
I got the table to work. but it seems that I need to add for the attribute “position:relative” to work. Else the header also scrolls? But when I add “” my .jsp displays a blank page. any solution for this?
I got the table to work. But, did any one tried the print option. I am get a problem while printing data which extends more than one page. I am able to get the top most border for the header in first page only, for the rest of the pages the border on the top of the header is not getting printed.Any solution for this? Guys its urgent for me…If any body has a solution please reply….
Kiran,
I used this in a print application as well, and my solution was to use a print style sheet.
http://css-discuss.incutio.com/?page=PrintStylesheets
I simply applied *no styles* to the scrollable table - so it simply prints like a normal table.
Hi Ryan,
Thanks for your reply. I have done what you said but the problem i am facing is if i scroll to somewhere middle in the page and then give a print then we are not able to print the page in a perfect manner. The header row is missing in such a case.Do you have any solution for this. please reply..
Hi all
For Ben, Nick, James - and anyone who has to work within Quirks mode.
There’s a similar solution here that should solve your headache:
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html
It follows the exact same core idea of having a scrolling TBODY for browsers that can, or fixed THEAD / TFOOT and a scrolling container DIV for browsers that can’t - but this one works in Quirks mode.
I tried the given solution in the blog and is working fine in my case.
But when we try to scroll the table a thin line displaying row data is visible above the table header.
Is there a way to hide it?
I didnt use the full solution provided but took some parts of the solution.. :(
I have resolved the issue now..
U dont need to reply..
Under Firefox 2.0, and possibly other standards complain browsers, you can get rid of the irritating horizontal scrollbar by defining a 16px width extra hidden spacer column in the thead.
http://www.agavegroup.com/images/articles/scrollTable/blogCSSQuestion.html
works very well but another problem is with tfoot what to do with it? here is no mechanism defined for tfoot. Let me know to about putting a static tfoot using IE6 or later?
table.scrollable th{
border-top:1px solid #999999;
border-left:1px solid #999999;
border-bottom:1px solid #999999;
padding:5px;
background:#f7f7f7;
position: relative;
}
it doesn’t work in IE7.
All the rows in tfoot are shown at the bottom of the page rather it should be at the end of the table. Any one having idea about this?
Hi All,
I also tried the same.First,Patrick’s version and then tried the modifications.But its just not working.I’m using IE6.0,sp2.What i want to do is,I want to create a table with both vertical and horizontal scrolls.And while using the horizontal scroll,I want to keep first few(say 3) columns fixed and the rest columns scrollable.Can anybody please suggest me some solution.
Hi Patrick,
Great job on the “CSS Scrollable Table” code (sure fixes header misalignment).
Running your css code with the fixed width removed seems fine for columns of varying width - so far!
Problem - running the code in IE 6 Sp2 produced ~ 2px strip of scrolling content showing through header running horizontally below the top border: http://rsai2.com/rfis/log7css.asp?Rows=desc (header has background color but still it leaves a gap beneath the border).
Has anyone else had a similar problem with scrolling content showing through a header that has background color?
Hi Everyone,
I think my (March 19th) problem of ” …scrolling content showing through header … ” may be an IE bug - doesn’t occur in FF 2.0 or Opera 9.10. Also, it sounds the same as Ruchin’s question from Jan 25th.
Has anyone figured out how to fix this problem in IE (6 and 7)?
Anyone,
I’ve got a grid control that is javascript based that has a static header and footer. Our target browser is only IE6 and 7 so I have no issues with cross browser (besides 6 & 7). In IE6 the footer is fine but in IE7 when I set the rows to be position: absolute and the top = to the table bottom + current footer height and set the margin-bottom of the table to the height of the footer the rows disappear. When I step through the code the footer rows render fine all the way up to the point that I set the margin-bottom, I’ve tried padding on the container, etc… but each and every time the moment that code runs the tFoot disappers.
If anyone has ever come across this please let me know.
IE (6.0.2800.1106 xp pro)
Sorry to burst your bubble but the whole table scrolls in my IE, header row and all… footer row totally absent… text looks big and ugly compared to FF 1.5.0.6
FF- the header row text is left aligned while the footer row text is centered but works as you expected.
Nice try though!
Hi,
I’m having a bit of trouble with Opera 9.20.
When I have the line
overflow:visible !important; in the CSS. My Opera makes the whole table visible to the end. (With and without my user.css)
Without overflow:visible !important;, the whole table is scrolled, without scrollbars.
The headers as well as the footers, never seemed to be in a fixed position.
This is definitely broken - as are most attempts at doing it I found on the web - in IE7 (7.0.5730.11 win32). The whole table scrolls vertically.
I don’t have a solution.
Jan
The code does no work in IE 6.
Hi,
Just one thing. In some situations, especially when no doctype is specified and parent elements are relatively positioned or floated, I’ve found the following to be effective:
.Scrolling{
overflow: auto;
margin: 0 auto;
}
.Scrolling table{
width: 100%;
}
.Fixed{
position: relative;
top: expression(offsetParent.scrollTop);
}
.Fixed tr{
position: relative;
top: expression(offsetParent.scrollTop);
}
.Fixed tr th, .Fixed tr td{
position: relative;
top: expression(offsetParent.scrollTop);
}
Where scrolling is the container div and fixed is a class applied to the thead element.
Previous example tested in IE5 and IE6 (intranet development, eh?)
WOW - there’s a lot of confusion surrounding this whole issue…
Like many of you, I have wasted a significant amount of time trying to figure this stupid thing out, and this website had the best info thus far…
For those of you who are trying to make your table scroll with a fixed header and you don’t want the horizontal scrollbar in FireFox (2.0), here’s the solution that I came up with:
div.scrollWrapper{
overflow:visible !important;
overflow:auto;
height:200px;
}
table.scrollable{
table-layout:fixed; margin-right:16px;
width:450px; /*same width as table*/
margin-right:0;
border-collapse:separate;
}
table.scrollable th{
position: relative;
top: expression(document.getElementById(â€scrollWrapperâ€).scrollTop-2);
}
table.scrollable tbody{
overflow-x:hidden !important; /*hide the horiz scollbar in firefox*/
height:200px;
overflow:auto;
}
table.scrollable tr{
height:0px;
}
table.scrollable td{
text-align:center;
…thanks to the original poster for the source:)
I haven’t tested this in Safari, but it works great in IE6 and FireFox 2.0
CHEERS
-joey d
OOPS!
I made a mistake above…someone mentioned that in IE, you can see the content of the table scroll under the fixed header, so replace the table.scrollable style with this:
table.scrollable th{
top: -3px;
position: relative;
background-color:#FFFFFF;
}
you have to use background-color to match your page or your content will show through beneath the table heading…
Again, this works great in IE6 and FireFox 2.0, but I just tested it in Safari on a Mac, and the entire table is gone!!!
The table heading shows up, but thats it - I dind’t use a footer, so I don’t know if a footer will show up or not in Safari, but that really sux! If anyone knows a Safari work-around, please let me know…
-joey d
I’m using a dynamic table which contains drop down, text box. Drop down in a dynamic table when scrolled down goes above the header.How to avoid it???
I have the same problem as Post # 72.
No matter what I try, the checkbox keeps scrolling above the fixed header.
I tried giving the header a z-index of 10000 and the tbody a z-index of -1 but that didn’t have any effect either.
Would really appreciate if someone can figure out how to solve this.
The fixed header thing is working great for me in FF but the header doesnt get fixed.
I have tried all the fixes suggested by others, but I donno why , my IE doesnt seem to accept any fix. It just scrolls the header with the rest of the body.
My css file reads like this:
div.scrollwrapper{
float:left;
height:500px;
width:100%;
overflow:visible !important;
overflow:scroll;
}
table.ResultsTable{
margin-right:0 !important;
margin-right:16px;
}
tbody.scrollablebody {
height:400px;
overflow:-moz-scrollbars-vertical;
}
tbody.scrollablebody tr{
height:0px;
}
thead.fixed_header {
position: relative;
top: expression(offsetParent.scrollTop);
}
thead.fixed_header tr{
position: relative;
top: expression(offsetParent.scrollTop);
}
thead.fixed_header tr th,thead.fixed_header tr td{
position: relative;
top: expression(offsetParent.scrollTop);
}
Can somebody help?
The IE version I have 6.x and the online examples of this thing like
http://www.imaputz.com/cssStuff/bigFourVersion.html
work fine on it.
Also , I cant have any Doctype defined.
Max
I was able to get a fixed header working in IE6 with a Transitional DOCTYPE using the following CSS code:
table.scrollable thead th{
position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop-1);
z-index:20;
}
I also fixed the left collumns by assigning them the class “locked” and applying this CSS:
table.scrollable.td.locked {
position: relative;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft-1);
z-index: 10;
}
I used a combination of the two and a higher z-index to lock the upper-left cells. I have only tested in IE6, which suits my needs since I develop for a corporate intranet environment. I hope this is of use to someone.
Thanks,
~Kevin
to Richard’s problem of ” …scrolling content showing through header … “, you don’t have use negative top positions if you
A pure css solution would be to remove
border-collapse: separate;
( Setting it to
border-collapse: separate; fixes it in IE, but spoils it in FF)
See the note ‘So to be safe I add border-collapse:separate; to the table.’ in the original article.
sorry, I meant
( Setting it to
border-collapse: collapse;
in the post above
In answer to entry #45, how to prevent FF 1.5+ scrollbar from obsuring data in last column, just add:
table.scrollable td:last-child {
padding-right: 20px;
}
[...] Source [...]