Geeks With Blogs
Leslee Sheu Senior Production Artist at e.magination
ASP.NET and MOSS Master Pages, HTML, CSS

This week I was tasked with styling a data table so that all the rows would scroll vertically, but the header row would stay in place.   For the project in question, the scrolling must work in both Firefox and IE 7.

Firefox supports CSS for scrolling the <tbody> part of the table.  However, IE does not support scrolling for the <tbody>.  I searched some other blogs for solutions and found that a popular solution for IE involves using expressions in CSS.  A scrolling <div> is placed around the <table>.  The expression is applied to the <thead> row like this:

     thead tr {
         position: relative;
         top: expression(this.offsetParent.scrollTop);
        }

But I found that the relative positioning caused the <thead> to shift down a few pixels when the scroll is activated.  (Adding -2 to the expression did not solve the shifting problem for me.)  So I decided to use position: absolute instead.  This positions the row in <thead> correctly, however it will cover up the rest of the table rows.  So I applied extra padding to the first table row in <tbody>, so that the date will show below the fixed header.  Here is the result:

Here is my code, which I have only tested in Firefox 3 and IE 7.  The first CSS style block is for Firefox.  The second style block is within conditional comments for IE, so that these styles will overwrite the Firefox styling.  (Normally I would be linking to external stylesheets -- a general one for non-IE browsers and a separate one for IE).  For simplicity's sake in this example, I did not use class names -- you could apply your own class names as needed.

CSS:

<style type="text/css">
    table {
        border: solid #66CC99;
        border-width: 0px 1px 1px 0px;
        width: 400px;
    }
    th, td {
        border: solid #66CC99;
        border-width: 1px 0px 0px 1px;
        padding: 4px;
    }
    th {
        background-color: #339999;
        color: #FFFFFF;
    }
    tr.alt td {
        background-color: #EEEEEE;
    }
    tbody {
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>
<!--[if IE]>
    <style type="text/css">
        div {
            position: relative;
            height: 200px;
            width: 416px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: solid #66CC99;
            border-width: 0px 0px 1px 0px;
        }
        table {
            border-width: 1px 1px 0px 0px;
        }
        thead tr {
            position: absolute;
            top: expression(this.offsetParent.scrollTop);
        }
        tbody {
            height: auto;
        }
        table tbody tr:first-child td {
            padding: 29px 4px 4px 4px;
        }
    </style>
<![endif]-->


HTML:

<div>
    <table border="0" cellspacing="0" cellpadding="0">
        <thead>
              <tr>
                    <th>HEADER 1</th>
                    <th>HEADER 2</th>
                    <th>HEADER 3</th>
                    <th>HEADER 4</th>
              </tr>
        </thead>
        <tbody>
              <tr>
                    <td>content 1</td>
                    <td>content</td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 2</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr>
                    <td>content 3</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 4</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr>
                    <td>content 5</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 6</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr>
                    <td>content 7</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 8</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr>
                    <td>content 9</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 10</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr>
                    <td>content 11</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 12</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr>
                    <td>content 13</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
              <tr class="alt">
                    <td>content 14</td>
                    <td>content </td>
                    <td>content </td>
                    <td>content </td>
              </tr>
        </tbody>
    </table>
</div>
Posted on Friday, January 30, 2009 1:30 PM CSS | Back to top


Comments on this post: CSS Table Scrolling with Fixed Header for IE 7

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Leslee
Thank you for the code on Fixed headers. It seems to work in IE6 with a few bugs.
When I look at the table Dream Weaver design view, I see the top row. In browser view it disappears. Can this be fixed?
Also, can someone skilled with HTML write codes for the Tables in DW that will fix the header row?
At the age of 73, I decided to take up webdesign for our club. www.tcdxa.org
The learning curve with DW is nasty, but I have nothing else to do. It keeps me off the streets and out of the bars. Thanks in advance for any help you can pass along.
Jim
Left by Jim on Apr 20, 2009 12:03 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Merci
Left by Yassine on Apr 30, 2009 5:30 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Very usefull tip!

Does it handle horizontal scroll too (with a wider table lets say)?

Thanks!
Left by Mario GS on May 14, 2009 5:28 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
This solution is for vertical scrolling only. I've just been assigned another project that will use vertical and horizontal scrolling for the table. If I figure out a good solution for that, I'll try to post it.
Left by Leslee on May 15, 2009 9:37 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
does not work in google chrome!
Left by Jim on May 18, 2009 6:20 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
doesn't work in Safari either.
Left by Rusty Howson on May 20, 2009 6:33 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hi Jim and Rusty -- as my post mentioned, for this problem I was tasked with making it work in IE7 and Firefox only. We targeted these two browsers because the project is an internal application and all the employees (end users) were using either IE7 or Firefox. Thank you for testing it in Chrome and Safari. If you figure out a solution for Chrome and/or Safari, it would be helpful to know!
Left by Leslee on May 25, 2009 12:45 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hello, I tested this code on IE8 but it does not work. Can you please do the same for IE8.
Left by Usman on Jun 04, 2009 8:56 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Try it out with only 2-3 rows and you'll see why this solution doesn't work for all cases. It will stretch the rows to fill the fixed height of the tbody. So it's not suitable for a variable number of rows.

I'm coming to the conclusion that the only way to achieve this effect is to have one table for column headers and another scrolling one below it for the data. Not too bad if you have fixed pixel widths for all the columns, but obviously pretty bad if you don't know them in advance since the headers and data won't quite line up.
Left by Ian on Jun 10, 2009 9:54 AM

# re: CSS Table Scrolling with Fixed Header for IE 7 - printing
Requesting Gravatar...
What would be the magic code to put into a print stylesheet to make this print the whole table? I managed to get it to work for printing in firefox by setting the overflow to auto, but for some reason in IE7 it seems to then loose the table borders ....
Left by s on Jun 18, 2009 2:18 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Above piece of information is very much informative.
Left by ashwin on Jun 22, 2009 7:19 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Not working in IE 6,7
Left by Julian on Jun 23, 2009 3:26 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
I'm encountering an issue: first-child doesn't work in IE6, so the first row in <tbody> is hidden behind the static <thead>.

I tried using this CSS below for IE6:

table tbody tr td {
padding-top: expression(this.previousSibling==null?'29px':'4px');
}

but that targets the first <td> in every row instead of all the <td>'s in the first row. Not good.

Does anyone have a solution for this?
Left by HM on Jul 08, 2009 5:38 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
I solved this problem by adding extra empty row before the first row into <tbody>. had to measure the height of <thead> before and set it to that new row.
Left by Tim on Jul 09, 2009 6:29 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hi, this page is not working for me in IE 7 normal mode but it does work in Compatability mode. Took a screen shot and linked it.

As you can see the headers aren't the full width, and I've scrolled the table down slightly and the heading doesn't stay in place.
http://imgur.com/ADYyN.jpg


On a lark I tried different doc types on a local copy but it didn't solve the problem for me. Used http://htmlhelp.com/tools/validator/doctype.html for a list.

Left by Bob on Jul 27, 2009 8:01 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
thanks a lot!
worked fine on ie6
Left by oscar on Aug 18, 2009 12:21 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks for very useful suggestions.

Does anyone know of any way to fix first column the same way the header is fixed outside scroll area?
Left by Len Yabloko on Sep 21, 2009 6:39 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks for the solution. I had played with a number of similar css/html ideas, and got close - but your code was perfect! Thanks
Left by bob on Oct 07, 2009 1:22 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
This code will work on Safari, Opera and Chrome IF AND ONLY IF the table is in an iframe. I'm trying to figure out how to dump the frame, and will let you know if I succeed.
Left by bob on Oct 08, 2009 11:26 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
doesnt work in IE8
Left by supid IE on Oct 08, 2009 9:13 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Any fix for IE8?
Left by anjsag on Feb 01, 2010 12:24 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks for this solution...but...it does not work with IE8 (8.0.6001.18882). Please help!?
Left by anteportas on Feb 02, 2010 2:58 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
i got this from another forum and this works for ie8
just add below html
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Left by icasper on Feb 24, 2010 10:47 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
.locked{
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}

Someone asked to lock the frst column..try this...It worked in my previous application...dont remember all the things though...just include this class in the TD you want to fix...
Left by Harik on Mar 16, 2010 9:18 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks, very util.
Left by Lester on Mar 20, 2010 5:20 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hey, extremely useful, thank you very much.
Left by Sandeep Chatterjee on Jun 22, 2010 12:17 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks a lot this worked in IE8
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Left by Mani on Jul 05, 2010 8:15 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hey the IE=7 Solution is working, but i also work with master pages in asp.net. Is there any other way to get this thing to work under IE8.
Left by Bjoern on Jul 21, 2010 7:23 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Doesn't work in FF4.0b2. The technique was intended to work with FF3.x, and no doubt does, but if the new version of the browser breaks it, then this is probably not a good method to go with. I can only imagine the headache of people trying to modify legacy code having used this technique.

The use of doubled-up tables (one table for the header, another for the body) each in their own divs seems like a more robust and long-term solution.
Left by FDR on Aug 03, 2010 8:03 AM

# re: CSS Table Scrolling with Fixed Header for IE8
Requesting Gravatar...
hi,

thx a lot, i've fixed horizontal scroll in ie8.
Left by pandi on Aug 12, 2010 1:36 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
a good solution here http://www.tablefixedheader.com/
Left by bln on Aug 22, 2010 7:09 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hi Buddy,

I have created fix header table. I hope this will help you.

http://s7u.blogspot.com/2010/09/fixed-header-footer-with-out-css-hacks.html

Regards,
Shahib
Left by Shahib on Sep 29, 2010 2:31 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Left by Shahib on Oct 01, 2010 6:45 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
New version available please try http://s7u.blogspot.com
Left by Shahib on Oct 08, 2010 4:24 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
One more thank you... THANK YOU!
Left by aprigliano on Dec 08, 2010 10:26 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
@icasper : thank you..
Left by era on Dec 13, 2010 12:23 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
it will not in safari in mac. Please show the solution.
Left by chris on Jan 13, 2011 8:07 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Not working in Googlechrome any solution.... Its Urgent!
Left by mayank on Mar 16, 2011 4:30 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
I don't see it work in FF 4 :(
Left by PCTip on Apr 17, 2011 6:22 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks. It really helped. specially the padding part for first element.
Left by Ken on Apr 18, 2011 4:33 AM

# Solucion Correcta OK++
Requesting Gravatar...
EXCELENTE

Solucion correcta, tube problemas centrando una tabla denro de un div, pero con su solucion lo logre.

Probe el resultado en: IE, FF, CHROME. OK++

http://www.educolombia.org/notas/colpruebas/2010/califica/62/1/
Left by Hely Rojas on Apr 25, 2011 12:58 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
it works fine on FF 3 but no in FF 4
Left by sakini on Apr 28, 2011 10:55 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Thanks Leslee, this is a great solution for IE, but this does not work in Chrome, Do you have a workaround of this for Chrome ?

Left by Andrews on Apr 29, 2011 6:29 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Hmm, row 1 is hidden underneath the header for me!
Left by Chalky on May 02, 2011 3:38 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
You've been a life saver! thanks.
Left by Jim on May 23, 2011 2:25 AM

# Easy to understand and implement.
Requesting Gravatar...
I love your solution for scrolling the tbody.
IMHO the best way of solving this ff/ie problem.

Thanks a lot!
Left by malk on Jun 15, 2011 12:15 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Good article. It should be pointed out that as of IE 9, it still does not support scrolling via the tbody tag.
Left by ColdFusion Developer on Jun 23, 2011 5:26 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Sorry buddy, output is not same in ie8 and firefox 4+ when comparing with ie7. Any way Good job! :)
Left by Ravikumar V. on Jul 27, 2011 2:52 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
That is what i am expecting....
Left by raja on Aug 08, 2011 12:11 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
awesome !
Left by marcio on Oct 17, 2011 6:31 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
not working
Left by SS on Dec 21, 2011 5:34 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Works fantastic in IE7
Left by sangita mane on Dec 28, 2011 10:38 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
The code in the initial post works like a magic.
Thanks for your help!!
Left by Tom on Jan 05, 2012 12:17 AM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
not working on ie 9
Left by yalem on Jan 12, 2012 12:26 PM

# re: CSS Table Scrolling with Fixed Header for IE 7
Requesting Gravatar...
Life saver!

thead tr { position: relative; top: expression(this.offsetParent.scrollTop-2) }

Try that for the 2 pixel header problem!
Left by Andy on Mar 21, 2014 3:16 AM

Your comment:
 (will show your gravatar)


Copyright © Leslee Sheu | Powered by: GeeksWithBlogs.net