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

Dynamic Table Column Resizing in IE

TrackBack — Tue, 08 Feb 2005 18:50:00 GMT

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

TrackBack — Thu, 10 Feb 2005 19:39:00 GMT

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

Christian — Fri, 11 Feb 2005 14:22:00 GMT

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

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

Zelda2 — Wed, 27 Apr 2005 01:22:00 GMT

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

re: Firefox horizontal scrollbar

Peter Harris — Tue, 05 Jul 2005 18:12:18 GMT

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.

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

Dan Harkless — Wed, 06 Jul 2005 05:53:34 GMT

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?

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

Geoff Appleby — Wed, 06 Jul 2005 06:09:01 GMT

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. :)

non-strict fixed TFOOT

Andy Wood — Sun, 04 Sep 2005 22:42:33 GMT

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.

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

Jim Nesbitt — Mon, 05 Sep 2005 21:18:55 GMT

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.

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

R Raponi — Tue, 07 Feb 2006 06:44:57 GMT

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;
}

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

Saad R Qureshi — Wed, 15 Feb 2006 16:37:47 GMT

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.

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

John La Barge — Mon, 20 Mar 2006 22:54:56 GMT

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.

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

Comments — Tue, 28 Mar 2006 06:49:39 GMT

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.

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

Eric — Tue, 25 Apr 2006 22:13:25 GMT

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.

Aha

Eric — Tue, 25 Apr 2006 22:26:39 GMT

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

Hooray for clarity.

Broken HTML

Geoff Appleby — Tue, 09 May 2006 13:15:41 GMT

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.

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

Nic — Wed, 29 Nov 2006 19:10:21 GMT

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

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

Michael J. Ryan — Tue, 13 Mar 2007 14:52:01 GMT

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...

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

Michael J. Ryan — Tue, 13 Mar 2007 15:11:26 GMT

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...

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

Chris Coppenbarger — Wed, 25 Jul 2007 11:35:09 GMT

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.

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

dreaken667 — Thu, 10 Apr 2008 18:33:24 GMT

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>

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

Dreaken667 — Thu, 10 Apr 2008 18:54:01 GMT

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.

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

Antonio Suarez — Mon, 19 May 2008 07:11:21 GMT

Hi,

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

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

Propecia.

Propecia. — Thu, 07 Aug 2008 17:09:29 GMT

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.

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

Gary — Mon, 30 Mar 2009 12:31:48 GMT

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.

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

James — Wed, 04 Aug 2010 13:51:46 GMT

Perfect solution! Thank you for publishing it!