table-layout
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
table-layout CSS 属性定义了用于布局表格的单元格、行和列的算法。
尝试一下
table-layout: auto;
width: 150px;
table-layout: fixed;
width: 150px;
table-layout: auto;
width: 100%;
table-layout: fixed;
width: 100%;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>Lion</td>
<td>Africa</td>
</tr>
<tr>
<td>Norwegian Lemming</td>
<td>Europe</td>
</tr>
<tr>
<td>Seal</td>
<td>Antarctica</td>
</tr>
<tr>
<td>Tiger</td>
<td>Asia</td>
</tr>
</table>
</section>
table {
border: 1px solid #139;
}
th,
td {
border: 2px solid #a19;
padding: 0.25rem 0.5rem;
}
语法
css
/* 关键字值 */
table-layout: auto;
table-layout: fixed;
/* 全局值 */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;
取值
形式语法
table-layout =
auto |
fixed
形式定义
table-layout =
auto |
fixed
示例
具有 text-overflow 的固定宽度表格
这个例子使用了固定的表格布局，结合 width 属性，限制了表格的宽度。text-overflow 属性被用来在单词太长无法容纳时应用省略号。如果表格布局是 auto，表格将会根据其内容自动扩展大小，而不考虑指定的 width。
HTML
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
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 |
|---|
| Cascading Style Sheets Level 2 # width-layout |
浏览器兼容性
Loading…