[This documentation is preliminary and is subject to change.]
Sets or retrieves a string that indicates whether the table layout is fixed.
 |
Syntax
table-layout: auto | fixed
Property values
A variable of type String that specifies or receives one of the following values:
auto-
Default. Column width is set by the widest unbreakable content in the column cells.
fixed-
Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Standards information
- CSS 2.1, Section 17.5.2
Remarks
You can optimize table rendering performance by specifying the table-layout property. This property causes the table to be rendered one row at a time, providing users with information at a faster pace. The table-layout property determines column widths for a table in the following order:
- By using information in the width property for the col or colGroup element.
- By using information in the width property for the td elements in the first row.
- By dividing the table columns equally, regardless of the size of the content.
If the content of a cell exceeds the fixed width of the column, the content is wrapped or, if wrapping is not possible, it is clipped. If the table-layout property is set to fixed, the overflow property can be used to handle content that exceeds the width of a td element. If the row height is specified, wrapped text is clipped when it exceeds the set height.
Setting the property to fixed significantly improves table rendering speed, particularly for longer tables.
Setting row height further improves rendering speed, again enabling the parser to begin rendering the row without examining the content of each cell in the row to determine row height.
Examples
This example uses the CSS attribute to set the table layout to fixed.
<TABLE STYLE="table-layout:fixed" WIDTH=600> <COL WIDTH=100><COL WIDTH=300><COL WIDTH=200> <TR HEIGHT=20> <TD>...</TD><TD>...</TD><TD>...</TD> </TR> : </TABLE>
See also
- CSSStyleDeclaration
- currentStyle
- runtimeStyle
- style
- Reference
- width
- Conceptual
- Enhancing Table Presentation
Build date: 3/14/2012
I think it should say " ... by specifying the tableLayout=fixed" property. I believe that the text that follows that explains the algorithm applies only to the "fixed" setting.
<table style='table-layout:fixed'>
<tr>
<td width='60' bgcolor=green>60</td>
<td width='40' bgcolor=yellow>40</td>
<td width='20' bgcolor=red>20</td>
</tr>
<tr>
<td bgcolor=magenta colspan=2>100</td>
<td bgcolor=red>20</td>
</tr>
</table>
but this won't:
<table style='table-layout:fixed'>
<tr>
<td bgcolor=magenta colspan=2>100</td>
<td bgcolor=red>20</td>
</tr>
<tr>
<td width='60' bgcolor=green>60</td>
<td width='40' bgcolor=yellow>40</td>
<td width='20' bgcolor=red>20</td>
</tr>
</table>
I suspect the algorithm should be a little more intelligent (like for the other browsers) and that the algorithm should search for widths in subsequent rows if widths are not supplied in the first row.
Until then, it's something to watch out for.