CSS/Properties/table-layout
From Web Education Community Group
< CSS | Properties
Contents |
table-layout
The table-layout property controls the algorithm used to lay out the table cells, rows, and columns.
Description
| Values | auto | fixed | inherit |
|---|---|
| Initial value | auto |
| Applies to | 'table' and 'inline-table' elements |
| Inherited | No |
Values
auto
Use any automatic table layout algorithm.
fixed
Use the fixed table layout algorithm.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
table{
border-width: 1px;
border-style: solid;
border-collapse: separate;
width: 400px;
}
#au{
table-layout: auto;
margin-bottom: 20px;
}
#fx{
table-layout: fixed;
}
tr, th, td{
border-width:1px;
border-style: solid;
}
th{
width: 5%;
}
[index.html]
<body>
<table id="au">
<caption>Example 1. Auto</caption>
<tr>
<th>Values</th>
<td>top | bottom | inherit</td>
</tr>
<tr>
<th>Initial value</th>
<td>top</td>
</tr>
</table>
<table id="fx">
<caption>Example 2. Fixed</caption>
<tr>
<th>Values</th>
<td>top | bottom | inherit</td>
</tr>
<tr>
<th>Initial value</th>
<td>top</td>
</tr>
</table>
</body>
CSS Reference
The CSS specification defines the table-layout property in 17.5.2 Table width algorithms.
