table-layout

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

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

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
初始值auto
适用元素table and inline-table elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

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

auto
大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
fixed
表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

使用 “fixed” 布局方式时,整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow  属性控制是否允许内容溢出。

正式语法

auto | fixed

示例

本示例使用了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; 
}

结果

规范

Specification Status Comment
CSS Level 2 (Revision 1)
table-layout
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
table-layoutChrome Full support 14Edge Full support 12Firefox Full support 1IE Full support 5Opera Full support 7Safari Full support 1WebView Android Full support 1.5Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown