table-layout
Description
The table-layout property controls the layout methods for a table.
| Item | Value |
|---|---|
| Initial value | auto |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.tableLayout="fixed" |
Syntax and Property Values
table-layout: auto | fixed | inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| auto | Default value. Set the column width by the widest unbreakable content |
| fixed | Based on the table's width and the width of the columns, not the table contents |
| inherit | Inherit the table-layout property from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!--from w ww .ja v a2s.co m-->
border: thin solid black;
table-layout: auto;
}
th, tfoot td {
border: thin solid black;
text-align: center;
font-weight: bold;
}
tbody td {
font-size: 120%;
}
caption {
font-size: 90%;
text-align: right;
}
td, th, caption {
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td> R</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td> B</td>
<td> V</td>
<td> 1</td>
</tr>
<tr>
<td> Q</td>
<td> Q</td>
<td> 1</td>
</tr>
<tr>
<td> M</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
The code above generates the following result.
