table-layout

table-layout CSS属性定义了用于布局表格单元格，行和列的算法。

示例

/* keyword values */
table-layout: auto;
table-layout: fixed;

/* global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

浏览器支持

浏览器都支持table-layout

语法：

table-layout：auto| fixed

取值：

• auto：默认的自动算法。大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
• fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切。表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。使用fixed布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于auto自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用overflow属性控制是否允许内容溢出。

说明：

设置或检索表格的布局算法。

• 通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。
• 对应的脚本特性为tableLayout。

例子

本示例使用了fixed的表格布局，结合width属性来限制表格的宽。text-overflow属性用于文字过长时显示省略号。

如果表格的布局是auto，即使指定了表格的width，表格仍然会自适应内容自动撑开。

//HTML
<table>
 <tr><td>ed</td><td>wood</td></tr>
 <tr><td>albert</td><td>schweitzer</td></tr>
 <tr><td>jane</td><td>fonda</td></tr>
 <tr><td>william</td><td>shakespeare</td></tr>
</table>

//CSS
table {
 table-layout: fixed;
 width: 120px;
 border: 1px solid red; 
}
 
td {
 border: 1px solid blue;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis; 
}