css table-layout属性显示表格单元格、行、列的算法规则

CSS table-layout属性控制表格元素的自动调整和列宽计算方式。

table-layout可取值有两个：

• auto：默认值，浏览器根据单元格和表格的内容计算单元格和列宽；
• fixed：表格元素和单元格的宽度独立于内容而定，由表格或单元格的宽度属性值决定。

在使用table-layout属性时的注意事项：

• 该属性只对display值为table的元素有效；
• 该属性只会影响使用了width属性的表格，无影响于没有设置width属性的表格；
• table-layout为fixed时，可以通过设置table和td/tdCSS选择器的应用层叠使用!important属性覆盖存在的width和height属性的影响。

示例1：使用table-layout自适应表格宽度

HTML代码：

<table class="table-auto">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>值1</td>
    <td>值2</td>
    <td>值3</td>
  </tr>
</table>

CSS代码：

.table-auto {
  table-layout: auto;
  width: 100%;
}

在该示例中，table-layout属性被设置为auto，HTML代码中未设置表格或单元格的宽度属性，宽度由表格和每行中最宽单元格决定。同时，设置表格的width为100%，这样表格可以在其容器中完全填充，适应不同分辨率的显示效果。

示例2：使用table-layout固定表格宽度

HTML代码：

<table class="table-fixed">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>值1</td>
    <td>值2</td>
    <td>值3</td>
  </tr>
</table>

CSS代码：

.table-fixed {
  table-layout: fixed;
  width: 100%;
}
.table-fixed th {
  width: 33%;
}
.table-fixed td {
  width: 33%;
}

该示例中，table-layout属性被设置为fixed，HTML代码中同样未设置任何表格或单元格的宽度，而是通过CSS代码设置表头和单元格的宽度为33%。这样使得表格的宽度被均分为3等分，并且随着表格宽度变化而保持不变。

需要注意的是，当使用table-layout时，表头必须被显示定义（可以是th或者td元素）以才能正确定义列宽。