CSS参考手册
Miscellaneous Level 2
表格布局 | table-layout
该table-layout
CSS属性指定用于铺陈算法<table>
单元格,行和列。
/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
Initial value |
auto |
---|---|
应用对象 |
table and inline-table elements |
是否可继承 |
no |
媒体 |
visual |
计算值 |
as specified |
动画类型 |
discrete |
规范顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
值
auto
默认情况下,大多数浏览器使用自动表格布局算法。表格及其单元格的宽度将根据内容进行调整。
fixed
表格和列的宽度由单元格的宽度
table
和col
元素来设置宽度或第一行单元格的宽度。
后续行中的单元格不会影响列宽度。在“固定”布局方法下,一旦第一个表格行被下载和分析,就可以呈现整个表格。这可以加快渲染时间,而不是“自动”布局方法,但后续单元格内容可能不符合提供的列宽。单元格使用该overflow
属性来确定是否剪辑任何溢出的内容,但仅当表格具有已知宽度时; 否则,他们不会溢出细胞。
形式语法
auto | fixed
例
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: 100px;
border: 1px solid red;
}
td {
border: 1px solid blue;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Level 2 (Revision 1)The definition of 'table-layout' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
? - 14.0 + |
(Yes) |
1.0 (1.7 or earlier) |
5.0 |
7.0 |
1.0 |
Feature |
Android |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support |
? 1.5 |
? |
(Yes) |
? |
? |
? 9.8.0 |
? 3.0 |
Miscellaneous Level 2相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。