table-layout
试一试
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 #113399;
}
th,
td {
border: 2px solid #aa1199;
padding: 0.25rem 0.5rem;
}
语法
css
/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;
值
auto-
使用自动表格布局算法。表格及其单元格的宽度会根据内容进行调整。大多数浏览器默认使用此算法。
fixed-
使用固定表格布局算法。使用此关键字时，表格的宽度需要使用
width属性显式指定。如果width属性的值设置为auto或未指定，浏览器将使用自动表格布局算法，在这种情况下，fixed值无效。
固定表格布局算法比自动布局算法更快，因为表格的水平布局仅取决于表格的宽度、列的宽度以及边框或单元格间距。水平布局不取决于单元格的内容，因为它仅取决于显式设置的宽度。在固定表格布局算法中，每列的宽度确定如下：
- 具有显式宽度的列元素设置该列的宽度。
- 否则，第一行中具有显式宽度的单元格确定该列的宽度。
- 否则，该列从共享的剩余水平空间获取宽度。
使用此算法，一旦第一行表格数据被下载和分析，整个表格就可以被渲染。这可以比“自动”布局方法加快渲染时间，但后续单元格内容可能无法适应提供的列宽。单元格使用
overflow属性来确定是否裁剪任何溢出内容，但仅当表格具有已知宽度时；否则，它们不会溢出单元格。
正式定义
正式语法
table-layout =
auto |
fixed
示例
带文本溢出的固定宽度表格
此示例使用固定表格布局，结合 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;
}
结果
规范
| 规范 |
|---|
| 层叠样式表级别 2 # 宽度布局 |
浏览器兼容性
加载中…