table-layout 属性指定用于布置表格单元格、行和列的算法。
table-layout 属性指定了两种布局表格的算法：固定和自动。
当指定“自动”表格布局时，表格的宽度由其列的宽度设置。
当指定“固定”表格布局时，表格的布局使用表格的宽度、任何指定的列宽度以及边框和单元格间距值。
table-layout 属性设置为“fixed”的优点是它的性能。
在大表上，在呈现整个表之前不会显示该表。
这会产生页面加载速度更快的印象。
| 初始值 | auto |
|---|---|
| 应用于 | 表和内联表元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.TableLayout =“fixed”; |
CSS table-layout 属性值说明
| 值 | 描述 |
|---|---|
| auto | 当表及其单元格适应内容时，使用自动布局算法。这是此属性的默认值。 |
| fixed | 使用固定表布局算法。表，COL和第一行小区的宽度设置了表和列宽度。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
语法
table-layout: auto | fixed | initial | inherit;
具有“固定”值的表格布局table-layout属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
th,
td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 40%;
}
</style>
</head>
<body>
<h2>Table-layout 属性示例</h2>
<h3>Table-layout: fixed; width: 20%</h3>
<table class="t1">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>Haage</td>
</tr>
</table>
</body>
</html>
具有“auto”和“fixed”值的table-layout属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
th,
td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 250px;
}
table.t2 {
table-layout: auto;
width: 100%;
}
</style>
</head>
<body>
<h2>Table-layout 属性示例</h2>
<h3>Table-layout: fixed; width: 160px</h3>
<table class="t1">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>Haage</td>
</tr>
</table>
<h3>Table-layout: auto; width: 100%</h3>
<table class="t2">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>Hague</td>
</tr>
</table>
</body>
</html>
日期：2020-06-02 22:14:47 来源：oir作者：oir