Public Class GeoffAppleby : CSS expressions in IE and Firefox (or, How to make a TBODY scroll without Javascript)

Navigation

The Why

A couple of months ago, I blogged about a cool way to make a HTML table body scroll in IE using CSS expressions.

That post is by far the most hit page I've written - it seems that many people are trying to figure this out. Since it's been so popular, I wanted a chance to redo what I posted before - I've learned a bit more since then, and I'd also like to address all the comments that have been left on the first post up to now. I've also discovered a new way to do the scrolling that doesn't require the CSS expression at all.

The What

I really want to cover three things in this article.

The best way I've found to make a HTML TBODY scroll in IE6;
The best way I've found to do this when you need to support IE5 (and probably 4)
How I've done it in Firefox.

The How

IE6

To leave out the expressions you have to demand IE6 only, but it's also the simplest and most elegant.

With IE6 came the concept of 'strict standards compliance mode'. Earlier versions of IE had a broken 'box model', in that heights and widths of elements on the page were calculated differently to the CSS specifications. As a result, the 'box model hack' was born, which took advantage of CSS parsing behaviours to get IE to read one style and other browsers a different one, all in the one file.

'Strict standards compliance mode' causes IE to render these things correctly (according to the specification at least - us IE only developers consider all other browsers to still be broken :) Along with the box model, strict compliance mode changes a few other behaviours of IE as well. One of those changes gives up simple TBODY scrolling.

You can read about the changes that strict compliance mode brings into effect on the MSDN website. It also explains how to enable strict compliance mode by authoring your !DOCTYPE correctly.

I chose to use HTML 4.0 Transitional in the following examples, with a reference to the correct DTD. This makes it easy to test between modes - remove the reference to the DTD and you're back into 'quirks mode' and your table won't scroll correctly any more.

So, what does a scrolling TBODY look like in strict compliance mode?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>scrolling tbody</title>
    <style type="text/css">
        .container
        {
            border: solid 1px black;
            width: 400px;
            height: 150px;
            overflow: auto;
        }
        .noscroll
        {
            position: relative;
            background-color: white;
        }
        th
        {
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <table border="0" cellpadding="0" cellspacing="0" style="width: 384px">
            <thead>
                <tr class="noscroll">
                    <th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            </tbody>
        </table>
    </div>
</body>
</html>

[See this live] - This only works in IE6. I've also tested in IE7B2, and it works fine there as well. In Firefox, it doesn't work at all.

There's no CSS expression! And that's why I like this version.

In effect, what we're rendering is a DIV with a fixed height, deliberately shorter than the height of the TABLE that it contains. The overflow style of the container DIV set is set to auto, which means that the DIV will scroll if necessary - and this example it does. It's also fixed at 400 pixels wide.

Since we've entered strict mode, the box model problems that are inherent in earlier versions of IE (and version 6 when strict mode isn't enabled) aren't with us - so the width of the table is set to 16 pixels less than the container DIV to allow room for the scrollbar. Obviously if you didn't know in advance if your table was actually going to scroll, you would set the overflow style on the DIV to scroll, which will cause the scrollbar to be rendered whether the the table scrolls or not.

The trick to making the header stay still when you scroll is the position: relative; style that is part of the noscroll class. When you explicitly set relative positioning on an element when one of it's parents has an overflow style set, then what you've really done is caused it's position to be fixed.

And that's it! If you can limit your users to only browsing with IE6, and you can stay in strict compliance mode, you're done. Microsoft have very little support for IE5 or less browsers anymore, and IE6 is, afterall, about 4 years old now, so IE 5 is starting to get pretty rare. Staying in strict compliance mode is a little harder, but worth it as far as I'm concerned.

I owe my discovery of this fact to 'boconnor' who left a comment on my first post. He gave a link to this article where the author has some tricks for scrolling the TBODY in many different browsers at once. It's certainly worth a read - although I wouldn't have worked out how he did it if I didn't do a view-source and discover that he commented his style sheet fairly well. Really, who does that? :)

When you're playing with the styles, you should also note that I've explicitly set a background color on the 'noScroll' elements. When no background color is set on anything, then the background is rendered transparent - and when you scroll, you can watch the TBODY moving through underneath the THEAD.

Setting the 'noScroll' class on any of the table elements will fix it in place. You could do it to the first cell of every row to make a 'sticky' left column. Be careful here, because the ones outside the DIV will still render. Maybe a zIndex tweak will fix that, but I haven't tested it.

Donovan Marsh commented on how SELECT lists rendered wrong. This is a problem with all windowed objects that are rendered to a web page, of which the SELECT element is the most common. The problem here is that the drop down control is really that - the Win32 drop down combo, and not an internal rendering from IE. As a result, it's drawn last (that's my guess) and sits on top of everything else. So when you scroll down the table, if it contains a SELECT list, then it floats on top of your static THEAD. You would think that playing with the zIndex would help us here, but it doesn't - it's drawn last. The reference on zIndex on MSDN mentions that zIndex can not be applied to windowed controls. Ever noticed how you can't apply many styles to the select list either? Same reason. INPUT elements appear to work OK, however.

To solve this, there's three options. My preference is simple: don't use SELECT lists. Your next option, as Martin Sundberg points out in the comments, is to write some javascript that detects when the SELECT element is touching or under the THEAD, and set its visibility to hidden. No, I don't like it, but if you have to use SELECT lists, then you're sorta stuck. The third is to, of course, write your own DHTML drop down control (or get someone else's). This will work too, because then it's not windowed, but it's not a simple job.

WStoreyII asked how to make it happen to the footer. Well, without resorting to CSS expressions or javascript, I can only suggest absolute positioning. Here's an example:

[See this live]

I added a TFOOT and set an in-line style to position it in the right place. This is not nice, and the top has been carefully crafted to be in the right spot. What you'd really want is a once-off repositioning in script to make sure that it's correct for the current browsers rendering efforts - the top value needs to be the height of the scrollable DIV minus the height of the TFOOT element. In this case, my TFOOT renders at 13 pixels high.

In IE5, absolute positioning won't work. An expression to calculate the same sort of thing will likely work, however.

IE5 or non-strict

If you can't keep in strict compliance mode, or need to support IE5 as well, then it's time to fall back to the next option. CSS expressions.

Before you ask, I tried absolute positioning of the THEAD element while in non-strict mode, and it didn't work.

CSS expressions allow you put javascript within CSS. It's only supported in IE, but it's been there for a while now. You can reference pretty much any global client side JS variable, and you have access to the 'this' object too. Pretty cool. You can read about them on MSDN here.

The disadvantage of CSS expressions, however, is that they aren't calculated just once. Any time the window is resized or changed they are recalculated. It also happens anytime a javascript thread is finished - so if you track a lot of document events, then your expressions are continuously recalculated. If you catch the mousemove event - whoah! This last snippet of info I found in an article written by Erik Arvidsson. It's a good read about optimisation of expressions too!

Anyway, what we need to do is keep convincing IE that when it renders the table to keep the THEAD at a certain location. All we need to do in this case is make one little modification to the noscroll class in the above CSS.

.noscroll
{
    position: relative;
    top:expression(this.offsetParent.scrollTop);
    background-color: white;
}

[See this live] - This sample works in IE5, IE6, and even IE7B2. In Firefox, it doesn't work at all.

Here we set the top style to be the same as the scrollTop of the offsetParent. This little piece of trickery works because of who the offsetParent actually is. Elements within a TABLE don't get the offsetParent set as what you'd expect - in the THEAD's case (and the TRs and TDs too) the offsetParent is actually the scrollable DIV that contains the TABLE, rather than the TABLE itself. Instead of forcing the THEAD to stay at the top of the TABLE, we force it to the top of the DIV.

In my blog comments nira pointed out how setting a background color on the scrollable DIV container to some color (say, yellow) made weird rendering bugs when you scrolled. She (I think nira is a she) is right too - you get this weird flicker thing going on. I found a solution for this problem - don't set a background color on the container DIV :) I found that setting it on the TBODY instead created the same effect but didn't render strangely.

Firefox

People who know me know I'm an IE developer, but since someone always asks, I might as well save them the hassle and cover it now.

I'm not a Firefox expert, and I can't get it to work to my liking, but here's the HTML I came up with. Feel free to fix it and post it back to me :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>scrolling tbody</title>
    <style type="text/css">
        .tableScroll
        {
            border: 1px solid black;
            width: 400px;
        }
        .container
        {
            height: 150px;
            overflow: auto;
        }
        th
        {
            text-align: left;
        }
    </style>
</head>
<body>
    <table class="tableScroll" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th>
            </tr>
        </thead>
        <tbody class="container">
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        </tbody>
    </table>
</body>
</html>

[See this live] - Remember, this only works in Firefox. In IE, I honestly can't remember what happens. In IE7B2, it looks terrible.

It's fairly similar to the IE versions. The container class has been assigned the TBODY instead of the scrollable DIV (which is now gone). I removed the width and border styles from the container class and put them on the TABLE instead.

This works almost perfectly, except that the scroll bar gets rendered inside the table now, instead of inside the DIV. As a result, there isn't enough room (16 pixels missing for the scrollbar) to display the full TR, so a horizontal scrollbar appears too. Yick!

Opera [New addition as of 20050511]

Today I tested each of these methods in the latest version of Opera that was available for download (non-beta). None of them rendered the table with a scrollable tbody. The closest it came was to scroll the entire table in the IE6 version, but the THEAD scrolled up with the rest of the body. I'm not sure what to do to fix it yet, but I thought I'd post my findings so far :)

All at Once

To cover all browsers at the same time, you're in for interesting times. Go back and read again the article I mentioned before about the guy who got TBODY scrolling in multiple browsers. It's a lot of work but he has done the work for you. All I've really done is talked about my experiences, and split it out to get rid of all the non-IE specific stuff.

Enjoy.

Authors Note: When my blog transitioned over from dotnetjunkies.com to here, my articles didn't get copied over with their feedback - I had to do it by hand. This being the case, ~~the article page still exists~~ on the old host too (with it's original feedback) but the content of the article is just - just a link to here. For those of you who left feedback on the original article, my apologies, but I can't copy it across.

Note 2: No, doesn't exist anymore :) It's reaaalllly old now.

Posted: Wednesday, February 02, 2005 4:57 PM by Geoff Appleby

Filed under: Web Pages

Comments

TrackBack said:

# February 9, 2005 5:50 AM

TrackBack said:

# February 11, 2005 6:39 AM

Christian said:

There is a problem with your IE6 solution when you have an DIV for example that gets expanded and collapsed above the table.

The table header doesn't slide down when the DIV above is made visible. The table body slide's down appropriately and the table header is overlapped by the content above.

Is there any solution for this?

Good work.

Christian

# February 12, 2005 1:22 AM

Zelda2 said:

My intended audience is on an intranet using IE6. I tried it and it worked perfectly! Merci Beaucoup!

# April 27, 2005 11:22 AM

Peter Harris said:

To get rid of the horizontal scrollbar, add another column to the THEAD and TFOOT (if any), with at least a non-breaking space in it.

Then the TABLE will be wider than the TBODY, so there's room for a vertical scrollbar without having to add a horizontal one.

# July 6, 2005 4:12 AM

Dan Harkless said:

Since you don't have preview links for your code samples (it would be extremely helpful if you could add that), I was copying and pasting the code into files on my server, but I discovered that all your closing tags are missing the "</" at the beginning (e.g. "html>" instead of "</html>"). Any way you can de-munge all your source?

# July 6, 2005 3:53 PM

Geoff Appleby said:

Peter: Interesting trick. Sounds like a bit of a hack, but it's worth checking out. Hopefully it's easy to get the precision right.

Dan: You know, I'd never noticed that! It must have got screwed up in the move from my last blog host to here - I'll sort it out tonight when I have a chance. Thanks for pointer. :)

# July 6, 2005 4:09 PM

Andy Wood said:

Hiya

To make the footer stay put in a non-strict environment, I found the following styles worked:

div.container { height:160; width:100%; overflow-y:scroll }
div.container thead tr { position:relative; top:expression(offsetParent.scrollTop) }
div.container tfoot tr { position:expression(offsetParent.scrollHeight > 160 ? "relative" : "absolute"); top:expression(offsetParent.scrollHeight > 160 ? offsetParent.scrollTop + 160 - offsetParent.scrollHeight : 160 - offsetHeight) }

Again, it's not great that you have to know some explicit height values (in this case the size of the div) and the use of the conditional to cater for whether the content really scrolls or not doesn't exactly feel elegant either - but this works for me and may be useful to others too.

# September 5, 2005 8:42 AM

Jim Nesbitt said:

Many thanks for this. I saw the earlier post and I've used it with IE5/IE6

It works perfectly and definitely gets my vote for Tip of the decade.

# September 6, 2005 7:18 AM

R Raponi said:

to get rid of the horizontal scroll bar in Firefox just

container
{
height: 150px;
overflow-y:auto;
overflow-x:hidden;
overflow:-moz-scrollbars-none;
overflow:-moz-scrollbars-vertical;
}

# February 7, 2006 5:44 PM

Saad R Qureshi said:

Hi there,

I tried the both the solutions, with and without css expressions.
and i got problems in both.

One with css expression is having a problem that, when i use it in my arabic webpage which is rtl align then the header disappears.But when i switchs back to ltr it appears.why?

One without css(i.e. using stand complaince mode) is having a problem mentioned above, i.e. the header is not fitted inside the div boundary i mean it is not inside teh horizontal scrollbars.The header slides above the div element.why?

How can i fix any or both of these problems?

Please help me out on this....

Bye.

# February 16, 2006 3:37 AM

John La Barge said:

Maybe it's just me, but it sure seems like the FireFox solution (knowing about the overflow-x and overflow-y styles) is the most natural. After all what we are trying to scroll is an inner portion of a table. It doesn't seem correct to have to wrap it in DIVs.

# March 21, 2006 9:54 AM

Comments said:

1. The HTML inside the scrolling divs is wrong - it is missing all </ characters of the closing tags.

2. If you actually put the example grids in the page (or another test page you refer to) that makes it way easier for people to see what you are talking about.

# March 28, 2006 4:49 PM

Eric said:

Aside from the borked html (broken closing tags), all I get (once I fix the borked tags) is a table inside a scrolling DIV (on IE 6).

It's impossible to tell if this is the intent or not (there's no example in this page), but if it is, I don't get the "big deal", a table inside a scrolling div? I was expecting the table header row to stay put while the rest of the content scrolls, but that's not what this html/css does.

# April 26, 2006 8:13 AM

Eric said:

Now it works. It was all cuz of the gunked up HTML source.

Hooray for clarity.

# April 26, 2006 8:26 AM

Geoff Appleby said:

Eric (and all others who've complained):
I'm sorry. I get so busy, then by the time i find time, i've forgotten.

It's done. The closing tags are fixed up (I think I've fixed them all up, anyway - if I've missed any let me know).

Sorry for the delays guys. I suck.

# May 9, 2006 11:15 PM

Nic said:

Nice one! I had to set the container width + 1 to prevent HScrolling in IE7 though.

# November 30, 2006 6:10 AM

Michael J. Ryan said:

for tfoot, you can use the following...

position:relative;

top:expression((offsetParent.scrollTop + offsetParent.clientHeight - offsetParent.scrollHeight) + "px");

If you don't want the footer to settle to the bottom when the div is bigger than the table, you can call a js function or use ((x < 0)?x:0) + "px" where "x" is the entire expression above...

# March 14, 2007 1:52 AM

Michael J. Ryan said:

A thought on the Firefox solution.. will take script, but set the tbody's overflow to "hidden", and create a div tag under the table, that takes up the tbody's clientHeight - the scrollHeight for it's height... have the entire table positioned to fixed.

As part of the onscroll for the div container, set the scrollTop for the tbody... this *should* work, it's not an elegant css only solution though...

# March 14, 2007 2:11 AM

Chris Coppenbarger said:

Well, I took your code, modified it, discovered the IE Conditional comments and came up with both FF and IE solution.

Basically, create an IE style sheet, such as ie-styles.css using the above code.

Create the regular style sheet and put your tbody css in it.

Here's what I have in the regular style:

.stairway_specs_head {

width:245px;

}

.stairway_specs_head table{

background-color:#dadab4;

color:#000000;

font-size:10px;

border:1px solid #ffffff;

border-collapse:collapse;

width:100%;

}

.stairway_specs_head th{

text-align:left;

}

.stairway_specs_head tbody{

overflow-y:scroll;

height:253px;

overflow-x:hidden;

}

The IE Style:

.stairway_specs_head {

width:245px;

height:253px;

overflow-y:auto;

}

.stairway_specs_head table{

background-color:#dadab4;

color:#000000;

font-size:10px;

border:1px solid #ffffff;

border-collapse:collapse;

width:100%;

}

.stairway_specs_head th{

text-align:left;

}

.stairway_specs_head tbody{

overflow-y:auto;

height:100%;

overflow-x:hidden;

}

.noscroll

{

position: relative;

background-color: white;

}

Notice some of the overridden stuff on the tbody.

In your head, after your link to your main css, add the following:

<!--[if IE]>

@import url(css/ie-styles.css);

</style>

<![endif]-->

That's it. I'm running FF2 on Ubuntu 7.04 and IE6 through wine, but my experience in the past is that it'll work on Windows as well. I'm about to head off to work, and so will check it then.

# July 25, 2007 9:35 PM

dreaken667 said:

For anyone who is looking for a clean solution in both IE and FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>scrolling tbody</title>

tr {

height: 14px;

}

td {

text-align: right;

padding: 0px 2px;

}

.container

{

_height: 200px;

_width: 318px;

_overflow: auto;

}

.tableScroll td:last-child, th:last-child {

padding-right: 18px;

}

.tableScroll {

height: 200px;

width: 300px;

}

.fixedHeader {

background-color: #fff;

}

.scrollingBody {

overflow-y: auto;

overflow-x: hidden;

height: 200px;

}

.fixedFooter {

background-color: #fff;

}

.fixedFooter tr {

_position: absolute;

top: expression(parentNode.parentNode.offsetHeight - (parentNode.offsetHeight * 2));

}

.noScroll

{

position: relative;

}

</style>

</head>

<body>

</tr>

</thead>

<tr>

</tr>

</tfoot>

</tbody>

</table>

</div>

</body>

</html>

# April 11, 2008 4:33 AM

Dreaken667 said:

Although, seeing as I loathe IE, I'm not that great with CSS expressions (proprietary microcrap). If you resize the table, you have to adjust the expression. None of the expressions listed here (or anywhere else I've found) seem to provide an accurate and consistent placement of the footer, so I leave that up to you to adjust as necessary.

# April 11, 2008 4:54 AM

Antonio Suarez said:

Hi,

I wrote an article about how to fix this issue without use css or JavaScript.

http://www.grupokino.com/content/view/24/34/

# May 19, 2008 5:11 PM

Propecia. said:

Nzlive com propecia rally new zealand. Propecia. Proscar versus propecia. Propecia pill. Buy propecia international pharmacy. Propecia side effects. Buy propecia buy cheap propecia online.

# August 8, 2008 3:09 AM

Gary said:

Hi,

I am trying to get this to work in IE6, IE7, and Firefox.

The Firefox and IE6 seem to work ok, but IE7 seems to be kind of iffy. It looked ok at first, but when went away to work on something else and then came back later the header was gone and the body scrolled up into the header area.

# March 30, 2009 11:31 PM

Public Class GeoffAppleby

Recent Posts

Tags

Navigation

Archives

CSS expressions in IE and Firefox (or, How to make a TBODY scroll without Javascript)

The Why

The What

The How

IE6

IE5 or non-strict

Firefox

Opera [New addition as of 20050511]

All at Once

Comments

TrackBack said:

TrackBack said:

Christian said:

Zelda2 said:

Peter Harris said:

Dan Harkless said:

Geoff Appleby said:

Andy Wood said:

Jim Nesbitt said:

R Raponi said:

Saad R Qureshi said:

John La Barge said:

Comments said:

Eric said:

Eric said:

Geoff Appleby said:

Nic said:

Michael J. Ryan said:

Michael J. Ryan said:

Chris Coppenbarger said:

dreaken667 said:

Dreaken667 said:

Antonio Suarez said:

Propecia. said:

Gary said: