Non scrolling header in table

Hi,
I've made a TABLE inside a DIV element.

The DIV is set to have { height: 60px; overflow: auto; } so that the
TABLE can be scrolled using the vertical scroll bar.

This is a very nice effect, but I also would like that the first row,
the one with the TD elements, would not scroll.

I really don't know if and how it is possible to achive this.

You can see a demo page at:

http://www.ribesinformatica.it/demo/table.html

Any help is really appreciated. Thanks.

Bye,

Andrea.

On Mon, 20 Oct 2003 14:20:47 GMT, Brian
<usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote:

Try splitting the table into thead, tbody, and tfoot (if necessary).
Then use the styles on the tbody. Note that I did not test this.

Thank you Brian, but what property should I use not to scroll the
thead?

Bye,

Andrea.

"Andrea Musuruane" <no (AT) spam (DOT) it> wrote

On Mon, 20 Oct 2003 14:20:47 GMT, Brian
usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote:


Try splitting the table into thead, tbody, and tfoot (if necessary).
Then use the styles on the tbody. Note that I did not test this.

Thank you Brian, but what property should I use not to scroll the
thead?

None. See the spec for more details on THEAD.
http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3

Note that you should *not* be using the styles on the div if you are going
to use this approach. If you do, you probably wont get the results you want
from THEAD because you will be scrolling the div instead.

Regards,
Peter Foti

On Mon, 20 Oct 2003 20:19:19 GMT, Brian
<usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote:

I just checked the original message. You have div with fixed height
and overflow: auto. (BTW, if the table contains text, you should
really set height in em or ex units, and not pixels.) I've never
tried something like this, and I don't have time to test it myself,
but it sounds like you can play around with this a bit.

Now set the height on tbody, with overflow: auto, and tell me how it
comes out. I'm curious to know. Good luck.

I applied your suggestion. You can have a look here:

http://www.ribesinformatica.it/demo/table2.html

With Opera 7.20, IE 5.5 and IE 6.0 the TBODY doesn't scroll and the
table looks like a normal, non-formatted, table. With IE the height
specified for the TBODY is appied (erroneously, I think) to each TR.

With Mozilla 1.4.1, the TBODY scrolls, but cell borders don't.

My fear is that CSS support of non-Mozilla browsers is not to poor to
achive this effect :-(

BTW I used the W3C validators and the HTML page and the CSS are valid.

Bye,

Andrea.

Andrea Musuruane wrote:

On Mon, 20 Oct 2003 20:19:19 GMT, Brian
usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote:


I just checked the original message. You have div with fixed height
and overflow: auto. (BTW, if the table contains text, you should
really set height in em or ex units, and not pixels.) I've never
tried something like this, and I don't have time to test it myself,
but it sounds like you can play around with this a bit.


Now set the height on tbody, with overflow: auto, and tell me how it
comes out. I'm curious to know. Good luck.


I applied your suggestion. You can have a look here:

http://www.ribesinformatica.it/demo/table2.html

With Opera 7.20, IE 5.5 and IE 6.0 the TBODY doesn't scroll and the
table looks like a normal, non-formatted, table. With IE the height
specified for the TBODY is appied (erroneously, I think) to each TR.

With Mozilla 1.4.1, the TBODY scrolls, but cell borders don't.

My fear is that CSS support of non-Mozilla browsers is not to poor to
achive this effect :-(

BTW I used the W3C validators and the HTML page and the CSS are valid.

Bye,

Andrea.
Darn, I was hoping you could do it.

When I needed to do this I used (shudder) frames. Works fine but is a pain.