Table with fixed header row and scrolling content?

I'm trying to use the OVERFLOW property to make only part of a table
scrollable, but to no avail.

You can split a table into two tables, with your column headers in the
top table and your data in the bottom table. This allows you to scroll
trough lots of data with the header stationery, but of course then the
column widths vary and the header table doesn't align properly with the
data data.

When I use a DIV around the data rows, its OVERFLOW property has no
effect.

Anybody know how to accomplish this? Or if it's even possible??

TIA--Big Slim

Big Slim wrote:

I'm trying to use the OVERFLOW property to make only part of a table
scrollable, but to no avail.



Anybody know how to accomplish this? Or if it's even possible??

Theoretically, tbody, tfoot and thead should help. In practice I had no
luck setting CSS-overflow for those elements.
http://outer-court.com/tech/tutorials/advanced-tables/

--
Google Blogoscoped
http://blog.outer-court.com

Big Slim wrote:

I'm trying to use the OVERFLOW property to make only part of a table
scrollable, but to no avail.
You can split a table into two tables, with your column headers in the
top table and your data in the bottom table. This allows you to scroll
trough lots of data with the header stationery, but of course then the
column widths vary and the header table doesn't align properly with the
data data.
When I use a DIV around the data rows, its OVERFLOW property has no
effect.
Anybody know how to accomplish this? Or if it's even possible??

Hi Big Slim,
just don't have the time to try, but I think it's possible. Just some hints.
First, you can try to style up with fixed height and overflow the <tbody>
using <thead> for the table header. If it doesn't work, and I suppose it
wouldn't, you could force tbody to have a block-level-element behaviour:

tbody{
display: block;
height: 300px;
overflow: auto
}

If even this doesn't work, you could nest a table into a <td> with
overflow set. The matter is that overflow in <td> doesn't work
properly in some browsers. The workaround to allow overflow
in a table cell is to put in it a div with overflow set. Here's the
code for the cell with overflow:

<td style="width: 200px; height: 400px">
<div style="width: 100%;height: 100%;overflow: auto">
<!--here you can put content table-->
</div>
</td>

If the columns of the two tables aren't aligned, you can always force
via css the cells of the header of the containg table and the cells of
the content table to have same width.

HTH,
SantaKlauss

P.S: I don't think you could put a div in a table in order to contain some
rows... try to validate the code for being sure of this.