HTML table with CSS help...

mikek12003

I have a table with lots of data.. so I decided to put him into a frame using the <div> tag css, after that I thought about putting the first row (which are the headers) outside the frame, I was forced to create a new table within the frame for the rows with the data, problem is that as the data fields change width (because of the data length), this width does not change at the header row how can I solve the problem? (I tried setting a width at the data columns but if the informations are more the column expands while I want the width unchanged and the extra information to be put by adding to the height)

NogDog

It's probably best to keep them together in the same table. You can use <th> instead of <td> for the header row cells, to allow you to style them differently. (Besides, that's their semantic purpose, anyway.)

Weedpacket

For more stylistic control, there are also the <thead>, <tbody>, and <tfoot> elements.

mikek12003

Already tried that but then the contaits of the frame will not appear (the only way to display them is to put a whole table inside)

Weedpacket

mikek12003 wrote:
Already tried that but then the contaits of the frame will not appear (the only way to display them is to put a whole table inside)

Please explain.

mikek12003

I have a very big table and I want to have a scroll area for the containts of that table, so I used CSS and the div tag to create a frame, all well when I put the whole table inside the div tag. But I want the tables header outside the scro;; area so that only hte data can be scrolled, if I simply put the tr,td tags inside the div tags and the table tag uotside it won't work, the solution I found was to crate a new table containing the headers and the div with the old table but the width of the collumns betwwen the headers and the data fields is not the same (some times the data are too many, I want too know if there is a way to have columns with a standard width-if the data are too many I want to go to the other line)

Weedpacket

mikek12003 wrote:
I have a very big table and I want to have a scroll area for the containts of that table

So you put the headers of the table in a <thead> and the body of the table in a <tbody> and use CSS to have the latter scroll.

ednark

TBody CSS scrolling doesn't work for most browsers. So you are stuck with two options I can see (at least till the next gen of css support)

1) dupe the table or 2) dupe the header.

1) Draw the table twice with the same data
In the top table display:none the tbody. the hidden tbody will still be taken into account when assigning col widths. So now your col widths will match up with the bottom table.
Wrap the second bottom table in a div, use that to scroll the table inside. display:none the thead of this table.
Now between the two tables you have a header and data. This will double the html required to display your table so this isn't a good solution with a large dataset.

2) Draw the header above the table
Set the table inside a scrolling div. Use css/javascript to find the size of each column, and then set the column widths of the floating header table by hand. This required the page to finish rendering until it will work, so there will be a jerky resize after the page loads. The duped floating header could even just be a bunch of div elements or a ul really.

If can come up with a different/better solution please share.