html table布局平衡

html table布局平衡

html的table标签，用于表格布局时，有时候会出现左右表格中线不在该区域中间的情况。

原因之一

table-layout: auto 下，浏览器会逐行根据内容计算列宽。当某行用了 colspan="2"，浏览器会重新分配该行的列宽比例，导致竖线和其他行不在同一位置。

修复方案

改动	作用
恢复 table-layout: fixed	列宽由 colgroup 定义决定，不随内容变化，colspan 不影响其他行的列宽分配，竖线严格对齐
百分比 colgroup	替代之前的硬编码像素值，容器缩放时列宽等比缩放，实现自适应

列宽分配（左右对称各50%）：

左标签 12% | 左输入 12% | 左后缀 26% | 右标签 16% | 右输入 12% | 右后缀 22%

←------------------------------ 50% ------------------------------→←------------------------------ 50% ------------------------------→

现在所有竖线会严格对齐。

<table class="param-table">
    <colgroup>
    <col style="width: 12%" />
    <col style="width: 12%" />
    <col style="width: 26%" />
    <col style="width: 16%" />
    <col style="width: 12%" />
    <col style="width: 22%" />
    </colgroup>
</table>