Non scrolling header in table

[Andrea Musuruane]

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.

[Brian]

Andrea Musuruane wrote:

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.

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.

--
Brian
follow the directions in my address to email me

[Andrea Musuruane]

On Mon, 20 Oct 2003 14:20:47 GMT, Brian
<us*****@julietremblay.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.

[Peter Foti]

"Andrea Musuruane" <[e-mail]> wrote in message
news:bn**********@newsreader.mailgate.org...

On Mon, 20 Oct 2003 14:20:47 GMT, Brian
<us*****@julietremblay.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

[Brian]

Andrea Musuruane wrote:

On Mon, 20 Oct 2003 14:20:47 GMT, Brian
<us*****@julietremblay.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?

Hmm. I don't know, because you snipped so much of the message! (And
so often people don't snip enough.)

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.

Start with sensible markup. Always. It the first row contains table
headings that you want to remain visible, start by marking them up as
<th> and not <td>. Then put them in a <thead>.

<table>
<thead>
<tr>
<th>col heading 1</th><th>col heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td> <!-- etc. -->
</tr>
</tbody>
<table>

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

--
Brian
follow the directions in my address to email me

[Andrea Musuruane]

On Mon, 20 Oct 2003 20:19:19 GMT, Brian
<us*****@julietremblay.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.

[bill drescher]

Andrea Musuruane wrote:

On Mon, 20 Oct 2003 20:19:19 GMT, Brian
<us*****@julietremblay.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.