Public Class GeoffAppleby

CSS expressions in IE (or, How to make a TBODY scroll)

Update:

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.

So I've written an article that (hopefully) explains it all. See it here :)

I've left the contents of this post alone (it starts just below), but you really do want to go and read the update - really! :)

So - onto the original post...

I've heard of CSS expressions before, and the msdn doco on it is pretty skimpy, so i never really knew what they were. They're not talked about that much, so i never found out.

But now i have. All i can say is that this is cool. Expressions in CSS are an IE 5+ only thing. This doesn't worry me, as our target platform that we target our applications at work already stipulates IE 5.5 or greater, and i prefer IE myself anyway. All you freaky firefox, mozilla, opera and safari wierdo scum just have to live without :P (don't flame me, i know you probably don't want it anyway - you've got tabs, what else is there to wish for in a browser? *grin*)

Anyway, we needed to make a TBODY scrollable at work. It's been done before, but normally involves two table tags. My partner-in-code found out about expressions however, and it amazed me at how much power you could have. (have i used that term before? I think it's a good way of referring to the guy i'm currently coding with at work :)

An example is probably best. I wanted this (roughly..this is a simple sample):

Depending on what you read this in, it might not render correctly. If you scroll the above table an the column headers scroll away, then try looking at this post in an IE browser.

And to do it, all that you need is this:

<STYLE type="text/css" media="screen">
    #container
    {
        border: solid 1px black;
        width: 50%;
        height: 150px;
        overflow: auto;
    }
    .noScroll
    {
        position:relative;
        top:expression(this.offsetParent.scrollTop); 
        background-color:white;
        font-family: Arial, Helvetica, sans-serif;
    }
    TH
    {
        text-align: left;
    }
</STYLE>
<div id="container">
    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
        <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>

Pretty cool huh? End result: javascript in CSS. Even to the level of having the 'this' object available. Sweet.

A quick item of note: You really need to set the background color on the row you don't want to scroll - if you don't, it stays transparent, and you can see the scrolling text behind the thead. Whoops :)

Of course, now i'm worried about CSS based virus's. Perhaps *.css needs to be marked as an unsafe attachment in Outlook :)