如何让两个HTML表格的列保持相同宽度？

出现这个问题的常见原因和对应修复方案如下：

• 没有给表格本身设置明确宽度：table-layout: fixed 生效的前提是表格本身有明确的width属性值，如果你只加了table-layout: fixed没给表格设宽，浏览器还是会根据单元格内容自动计算表格总宽度，两个表格内容不同自然宽度会有差异。
• 单元格盒模型配置不一致：两个表格的td元素的内边距padding、边框border、盒模型规则box-sizing如果不一样，就算设置了相同的width属性，最终渲染出的单元格总宽度也会不同。
• 宽度设置规则不统一：如果一列用百分比、另一列用固定像素，或者两个表格对应列的宽度值本身不一样，也会出现对齐问题。

具体修复步骤 #

1. 给两个表格设置完全相同的总宽度，同时统一表格基础样式：

table {
  table-layout: fixed;
  width: 100%; /* 根据需求调整为固定像素也可以，两个表格值要一致 */
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

2. 统一单元格的盒模型配置，确保边框、内边距都会被算进你设置的width里：

td {
  box-sizing: border-box;
  padding: 4px; /* 两个表格的内边距完全一致 */
  border: 1px solid #eee; /* 两个表格的边框样式完全一致 */
}

3. 建议用colgroup统一设置列宽，不需要给每个td单独加宽度，避免出现疏漏：

<!-- 两个表格都添加完全相同的colgroup配置 -->
<table>
  <colgroup>
    <col style="width: 20%">
    <col style="width: 30%">
    <col style="width: 50%">
  </colgroup>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

如果存在第一行单元格有colspan合并的情况，用colgroup设置宽度的方案也能避免合并单元格对列宽计算的干扰。

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