Scrollable Table

**tracy78** · 05-05-2006, 07:46 PM

I'm trying to create a table where the head stays fixed but the body is the only part that is movable.

I found an example where it sets the CSS property in thead th to:

top: expression(document.getElementById("<id>").scrollTop);

The <id> is a <div>

however, I have two tables so I tried to put the style directly into the page but it doesn't work..

<div class="scrolled" id="data">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="tablehead" style="top: expression(document.getElementById('data').scrollTop)">
<tr>
<th>Header 1</th>
<th>Header 2</th>

</tr>
</thead>
<tbody>

....

</table>

Then right below this is another div with another table.

So two separate ID's so somehow I have to set the "top" attribute differently for each thead...

</div>

**Twey** · 05-05-2006, 08:01 PM

Urgh, yuck. Never use expression().

Code:

<tbody style="overflow:scroll;">

**tracy78** · 05-05-2006, 08:05 PM

Originally Posted by Twey

Urgh, yuck. Never use expression().

Code:

<tbody style="overflow:scroll;">

But that does not work with IE.

**jscheuer1** · 05-05-2006, 09:04 PM

expression() is good for IE only and often can be used to do things IE won't otherwise do but, it means nothing to other browsers so, a backup plan for them is required.

Your code should work but, I can't see all of it so, there could be errors you aren't telling about. When using expressions, you can only have one element with a particular id on the page, otherwise the expression doesn't knot what you want it to use.

If each item has a separate id, there is no reason that you cannot use a stylesheet for this.

**tracy78** · 05-05-2006, 09:37 PM

Originally Posted by jscheuer1

expression() is good for IE only and often can be used to do things IE won't otherwise do but, it means nothing to other browsers so, a backup plan for them is required.

Your code should work but, I can't see all of it so, there could be errors you aren't telling about. When using expressions, you can only have one element with a particular id on the page, otherwise the expression doesn't knot what you want it to use.

If each item has a separate id, there is no reason that you cannot use a stylesheet for this.

I guess I'm not understanding how I can use a stylesheet for this.
top: expression(getElementById("something").scrollTop)

the "something" is the part I can't get because in the style sheet you have to specific the ID. I have about 3 tables and each has a different ID and each of the tables needs to have the header fixed.

The only way I can see is to create 3 separate Style Classes that are identical with the exception of the
top: expression.... part which will have a different ID for each table.

So I tried a different way by putting the "top" attribute in the tag itself

<thead class="myHeadClass" style="top:expression(getElementById("id").scrollTop)">
and that DOES NOT work.

**jscheuer1** · 05-05-2006, 09:58 PM

Originally Posted by tracy78

The only way I can see is to create 3 separate Style Classes that are identical with the exception of the
top: expression.... part which will have a different ID for each table.

Would that be so bad? You can also give an element more than one class:

class="standard extra"

Example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.one {
color:red;
}
.two {
background-color:blue;
}
</style>
</head>
<body>
<div class="one two">Hi</div>
</body>
</html>

**jscheuer1** · 05-05-2006, 10:14 PM

It also occurs to me that there is probably a good cross browser way to do what you want. However, without a visual example, I'm not sure what that is.

**mwinter** · 05-06-2006, 10:40 AM

Originally Posted by tracy78

I'm trying to create a table where the head stays fixed but the body is the only part that is movable.

The mechanism to do this is fairly trivial, but far from universally supported.

Code:

/* Do not place spaces around the child combinator (>)! */
table>tbody {
  height: xem;
  overflow: scroll;
}

where x is obviously the desired height of the scrolling region.

[...] I have two tables so I tried to put the style directly into the page but it doesn't work..

<div class="scrolled" id="data">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="tablehead" style="top: expression(document.getElementById('data').scrollTop)">

It won't, for three reasons:

Length values must have units. At the very least, the expression should be
Code:
```
document.getElementById('data').scrollTop + 'px'
```
The top property, along with the other box offset properties, only apply to positioned elements, and there's no indication of an attempt to do that, above.
IE only permits rudimentary styling of table components.

Even if you corrected the first two problems, the third will kill any attempt you make.

I suggest that you just accept that IE is a terrible browser, do what you can for the decent ones (using the suggestion at the very beginning of this post), and move on.

Mike

**jscheuer1** · 05-06-2006, 03:27 PM

Good suggestions/observations, Mike. Except that in IE, px is assumed in quirks mode. And since the OP claims this was working as a declaration in a stylesheet, I tend to believe that it can be done. Moreover, if it will work, it can be combined with the method(s) you and Twey outlined for other browsers, to make the page work under a wider variety of users agents.

You point out the obvious (to both of us) as regards the top property requiring that the position property be set as (in IE) to either relative or absolute. For this effect it is probably absolute. I had (perhaps erroneously) assumed that it was already set in the style section since, this had been said to be working there.

Your analysis of what the OP wants seems very likely (and shows a better grasp of the situation, in general, than I had) but, I'd still like to see an example, to be sure.

One other note at this point; expression() will not work even in IE if javascript is disabled, while the pure style settings of the other method(s) will work in all browsers that support them, with or without javascript enabled.

**mwinter** · 05-06-2006, 11:53 PM

Originally Posted by jscheuer1

Good suggestions/observations, Mike. Except that in IE, px is assumed in quirks mode.

I know, but you know what I think about that.

And since the OP claims this was working as a declaration in a stylesheet, I tend to believe that it can be done.

Indeed. It seems that it can be hacked, but the suggestion that the OP seems to have found is not the way to do it; the thead and tbody elements cannot be positioned. However, the row in the table header can be to produce the same effect, despite being wholly broken.

Your analysis of what the OP wants seems very likely (and shows a better grasp of the situation, in general, than I had) but, I'd still like to see an example, to be sure.

Alright then, John. Just for you.

That demonstration currently makes the assumption that the vertical scrollbar will be sixteen pixels wide, which isn't necessarily the case. There isn't much that can be done, other than to try and determine it via scripting and fix-up the style data, but that would be quite the pain in the ass.

Mike

Thread: Scrollable Table

Thread Tools

Search Thread

Scrollable Table

Bookmarks

Bookmarks

Posting Permissions