如何实现不受内部数据影响、宽度一致的自适应表格布局

问题根源 #

1. 表格默认使用table-layout: auto布局规则，浏览器会根据单元格内容长度动态计算列宽，不同表格的内容长度存在差异，自然会出现整体宽度不对齐的问题。
2. 第一个表格的<tbody>内存在一行多余的空<tr>，里面多了5个无内容的<td>，导致第一个表格实际列数和第二个不一致，进一步拉大了宽度差。

修复方案 #

第一步：修正HTML错误 #

删除第一个表格中多余的空行，保证两个表格的列数完全一致。需要删除的代码如下：

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

第二步：修改CSS配置 #

给.table类新增table-layout: fixed属性，强制表格严格按照设置的宽度布局，忽略内部内容长度的影响：

.table {
    width: 100%;
    background-color: transparent;
    /* 新增以下属性 */
    table-layout: fixed;
    word-break: break-word; /* 长内容自动换行，避免溢出单元格 */
}

/* 可选配置：固定前两列（标签列、单位列）的宽度，适配长文本标签 */
.table tr td:first-child {
    width: 22%;
}
.table tr td:nth-child(2) {
    width: 8%;
}

修改完成后所有.table类的表格都会严格占满父元素100%宽度，列宽固定不受内部内容影响，自然就会全部对齐。

内容的提问来源于stack exchange，提问作者Rogozin