Specifying the Table Layout
Description
table-layout has two possible value: auto fixed.
auto is the default. In auto mode, the browser sets the table width based on the widest cell in each column.
The browser has to receive all of the table content before it can determine the table width.
You can disable the automatic layout by using the other allowed value fixed.
In fixed mode, the size of the table is set by the width values for the table and for individual columns. If there is no column width information available, the browser will allocate the space evenly across the columns.
Therefore, the browser can determine the width of each column after receiving just one row of the table data. The data for subsequent rows is wrapped to make it fit.
Example
The following code shows the table-layout property.
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!-- w w w.ja v a2 s. c o m-->
border-collapse: collapse;
caption-side: bottom;
table-layout: fixed;
width: 100%;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table border="1">
<caption>Results of Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size</th>
</tr>
</thead>
<tbody>
<tr>
<thLong Title:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>A</td>
<td>B</td>
<td></td><td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 java2s.com Data</th>
</tr>
</tfoot>
</table>
</body>
</html>
Example 2
The following code shows how to mix Column percentage and pixels width settings.
<html>
<head>
<!-- w w w .j ava 2 s. c o m-->
<style type="text/css" media="Screen">
* .fixed-layout {
table-layout: fixed;
}
* .stretched {
width: 100%;
}
* .flex {
width: auto;
background: blue;
}
* .sized1 {
width: 500px;
background: gray;
}
* .sized2 {
width: 200px;
background: menu;
}
* .p1 {
width: 80%;
background: red;
}
* .p2 {
width: 20%;
background: yellow;
}
</style>
</head>
<body>
<table class="fixed-layout stretched">
<tr>
<td class="sized1">500px</td>
<td class="sized2">200px</td>
<td class="p1">80%</td>
<td class="p2">20%</td>
<td class="flex">auto</td>
</tr>
</table>
</body>
</html>