table-layout

auto

使用自动表格布局算法。表格及其单元格的宽度会调整以适合内容。大多数浏览器默认使用此算法。

fixed

使用固定表格布局算法。使用此关键字时，需要使用 width 属性明确指定表格的宽度。如果 width 属性的值设置为 auto 或未指定，则浏览器使用自动表格布局算法，在这种情况下，fixed 值无效。
固定表格布局算法比自动布局算法更快，因为表格的水平布局仅取决于表格的宽度、列的宽度以及边框或单元格间距。水平布局不依赖于单元格的内容，因为它仅取决于明确设置的宽度。

在固定表格布局算法中，每列的宽度确定如下

• 具有显式宽度的列元素会为该列设置宽度。
• 否则，第一行中具有显式宽度的单元格将确定该列的宽度。
• 否则，该列将从共享的剩余水平空间中获得宽度。

使用此算法，一旦下载并分析了第一个表格行，就可以渲染整个表格。这可以加快渲染速度，而不是“自动”布局方法，但后续的单元格内容可能无法适合提供的列宽度。单元格使用 overflow 属性来确定是否剪切任何溢出的内容，但前提是表格具有已知的宽度；否则，它们不会溢出单元格。

table-layout = 
  auto   |
  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;
}

结果

• <table>
• CSS 表格 模块