Scrollable HTML - Tables?

liunx

Guest
Hi Everybody,<br />
<br />
I'm trying to create a table within a <div> with a certain size. (overflow:auto) My Problem is now, how can I display the Table Head all the time, so that it doesn't scroll with the rest of the table. If I put it out of the <div> the cell-widths don't match anymore.<br />
<br />
Any Idea???<!--content-->could you specify widths for the cells? e.g. <br />
<td style="width:100px;"><!--content-->Yes I could, but I'm looking for a more elegant way. If there is no other way I'll have to do it like that. Nevertheless, thanks for you reply.<!--content-->Hi Pete<br />
Do you have a solution on this? If so, I would be interested too.<br />
<br />
Thanks and regards Fredy<!--content-->Hi Fredy,<br />
<br />
I did it this way:<br />
<br />
I created a table with 2 row and one cell in each row. The first row got the header of the table as a new table with only one row, the second row contained the div with the "overflow:scroll". the div contained the table with the actual values. The widths of all cells were fixed as percentage values. the only thing to mind is to add one additional cell in the header-table with the size of the scrollbar. I found the tutorial on the net, but i don't remember where, sorry. Let me know if you have any problems.<br />
<br />
regards Pete<!--content-->I'd recommend the following:<br />
<br />
<div style="overflow: auto; width:100px"><br />
<table><br />
<thead><br />
<tr style="position:relative;top:expression(this.offsetParent.scrollTop);background: #ffffff;"><br />
<th>title1</th><br />
<th>title2</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>111111</td><br />
<td>222222</td><br />
</tr><br />
<tr><br />
<td>3<br>3<br>3<br>3<br>3<br>3</td><br />
<td>444444</td><br />
</tr><br />
</tbody><br />
</table></div><br />
<br />
<br />
=========================<br />
Better Restaurants Are Out There (<!-- m --><a class="postlink" href="http://www.krestaurant.com/">http://www.krestaurant.com/</a><!-- m -->)!<br />
=========================<!--content-->
 
Back
Top