CSS | table-layout 属性

table-layout 属性是用来设置表格的自动布局算法的。

表格可以使用 auto 或 fixed 值来设置布局算法。

当 table-layout 属性设置为 auto 时，表格的宽度会根据内容来自动调整。

当 table-layout 属性设置为 fixed 时，表格的宽度会被设置为固定值，并且单元格的宽度会根据表格的宽度来进行调整。

语法

table-layout: auto|fixed|initial|inherit;

属性值

• auto: 默认值。表格的宽度会根据内容来自动调整。
• fixed: 表格的宽度会被设置为固定值，并且单元格的宽度会根据表格的宽度来进行调整。
• initial: 重置为默认值。
• inherit: 继承父元素的值。

示例

以下示例演示了如何使用 table-layout 属性：

## HTML

<table class="myTable">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
  <tr>
    <td>Row 3, Column 1</td>
    <td>Row 3, Column 2</td>
    <td>Row 3, Column 3</td>
  </tr>
</table>

## CSS

/* 设置为固定布局 */
.myTable {
  table-layout: fixed;
  width: 100%;
}

/* 设置表格主题样式 */
.myTable th {
  background-color: #eee;
  font-weight: bold;
}

.myTable td,
.myTable th {
  border: 1px solid #ccc;
  padding: 10px;
}

在上面的示例中，我们设置了一个包含三个表头和三个数据行的表格，使用 table-layout: fixed 属性将表格设置为固定布局，这样单元格的宽度就会根据表格的宽度进行调整。同时，我们还设置了一些基本的表格样式来提高表现效果。

总结

• table-layout 属性是用来设置表格的自动布局算法的。
• 可以使用 auto 或 fixed 值来设置布局算法。
• 当 table-layout 属性设置为 auto 时，表格的宽度会根据内容来自动调整。
• 当 table-layout 属性设置为 fixed 时，表格的宽度会被设置为固定值，并且单元格的宽度会根据表格的宽度来进行调整。