[RESOLVED] Variable widths and fixed header row

[silasslack]

Hi All,

Strictly speaking, the problem I have here it to do with HTML, but as people here have been helpful in the past, I thought I'd see whether anybody had any ideas.

I have a table that is filled with data from a mysql table. There is a header row, then a 'while' loop for filling the table with data.

I would like the header row to remain fixed when I scroll down the rest of the table, and I have managed to achieve this with CSS, but the problem is that the column widths vary depending on the data contained in them, and I can't get the header row columns to reflect the varying widths in the main table.

If anyone has any ideas I would be very grateful

Silas

[Weedpacket]

<table>
<thead><tr><th>Column one</th><th>Column two</th><th style="padding-right:2em;">Column three</th></tr></thead>
<tbody style="height:50px;overflow:scroll;">
<tr><td>Item 1</td><td>item 2</td><td>Item 3</td></tr>
<tr><td>Another Item 1</td><td>Item 2</td><td>Item 3</td></tr>
<tr><td>Item 1</td><td>This is also an item</td><td>Item 3</td></tr>
<tr><td>Item 1</td><td>item 2</td><td>item 31415926</td></tr>
</tbody></table>

The padding in the last <th> there is to make room for the scrollbar.

[silasslack]

Thanks, but I'm afraid that doesn't have any effect at all!

Silas

[Weedpacket]

Really? I tried it out myself with that code right there and it worked fine.

[silasslack]

Ah, I was using Safari and it didn't work. I've just tried it in Firefox and it works perfectly!... I think few of the users will be on Safari, so I'll make sure it works in IE and leave it at that!

Many Thanks for your help!

[silasslack]

aah! the lines scroll, but the table borders stay fixed so that the text scrolls behind them!! any ideas on that??

Silas

[johanafm]

IE8 is broken. I've no idea if there exists better solutions than this (which is crappy)

<table>
	<thead>
		<tr><th>Column one</th><th>Column two</th><th style="padding-right:2em;">Column three</th></tr>
	</thead>
</table>
<div style="width: 350px; height:50px;overflow:scroll;">
	<table>
		<tbody>
			<tr><td>Item 1</td><td>item 2</td><td>Item 3</td></tr>
			<tr><td>Another Item 1</td><td>Item 2</td><td>Item 3</td></tr>
			<tr><td>Item 1</td><td>This is also an item</td><td>Item 3</td></tr>
			<tr><td>Item 1</td><td>item 2</td><td>item 31415926</td></tr>
		</tbody>
	</table>
</div>

Obvious issues:
div width is not affected by table width (which is/can be calculated from cell contents).
"Header" width is no longer affected by content cell widths, since it's not in the same table.

Going into IE7 mode may be an option. Personally I wouldn't if I had any other option.

[silasslack]

Thanks for the help everyone. In the end, I have worked around the problem by using a table without borders, and using php to colour the rows alternately. That gives me a proper scroll effect with proper column widths (or at least proper alignment between the header row and the other rows). The crucial extract from the code being:

</tr>
</thead><tbody style=\"height: 300px; overflow:scroll;\">";
$lineamount = 0;


while($row = mysql_fetch_array($result))
  {
$lineamount++;    




if ( $lineamount&1 )
      {
      $bg = "#cccccc";
      }
else
      {
      $bg = "#ffffff";
      }




echo "<tr style=\"background-color: ".$bg.";\" id='line'>";

Again, Thanks for all your help

Silas