View in EnglishAlways switch to English

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>  <table>    <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;

取值

auto

默认情况下，大多数浏览器使用自动表格布局算法。表格及其单元格的宽度会根据内容自动调整大小。

fixed

表格和列的宽度是由table 和col 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的宽度。

在“fixed”布局方法下，一旦下载并分析了第一行表格，整个表格就可以被渲染出来。这可以加快渲染时间，相比于“automatic”布局方法，但是后续单元格内容可能不适合提供的列宽。单元格使用overflow 属性来确定是否要剪裁任何溢出的内容，但仅当表格具有已知宽度时才会生效；否则，它们不会溢出到单元格之外。

形式语法

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;}