html table布局平衡
html的table标签，用于表格布局时，有时候会出现左右表格中线不在该区域中间的情况。
原因之一
table-layout: auto 下，浏览器会逐行根据内容计算列宽。当某行用了 colspan="2"，浏览器会重新分配该行的列宽比例，导致竖线和其他行不在同一位置。
修复方案
| 改动 | 作用 |
|---|---|
| 恢复 table-layout: fixed | 列宽由 colgroup 定义决定，不随内容变化，colspan 不影响其他行的列宽分配，竖线严格对齐 |
| 百分比 colgroup | 替代之前的硬编码像素值，容器缩放时列宽等比缩放，实现自适应 |
列宽分配（左右对称各50%）：
左标签 12% | 左输入 12% | 左后缀 26% | 右标签 16% | 右输入 12% | 右后缀 22%
←------------------------------ 50% ------------------------------→←------------------------------ 50% ------------------------------→
现在所有竖线会严格对齐。
html
<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>