Friday, July 01, 2005 3:10 PM
hannes
Html tables: fixed-layout
I just copied this from my blogger account to test things out. :)
For some reason I have never used the table-layout CSS2 attribute. It is handy in cases where one column should use all "remaining width" of a table.
With table-layout set to auto (the default), the table below will have its first two columns condensed.
<table width="100%"><tr>
<td width="100" bgcolor="Red">a</td>
<td width="200" bgcolor="Blue">b</td>
<td width="100%" bgcolor="Green">c</td>
</tr></table>
With table-layout set to fixed, 100% can be regarded as "all remaining space". The <col> notation is optional, but I prefer it.
<table width="100%" style="table-layout: fixed"><tr>
<col width="100"><col width="200"><col width="100%">
<td bgcolor="Red">a</td>
<td bgcolor="Blue">b</td>
<td bgcolor="Green">c</td>
</tr></table>
The second Red/Blue/Green table is often the desired result. There must be other ways to get the same results and I would like to hear about them.
I did have a working layout without using fixed tables, but it caused the horizontal scrollbar to appear in IE6 at the incorrect width.