如何用CSS（或少量JS）对齐多表格列？兼容IE9

这个需求我之前做兼容IE9的项目时刚好碰到过，要让分散的表格对应列宽自动匹配又不能用现代布局，得用JS配合基础CSS来实现，思路其实很直接：先让浏览器自动算出每列的自然宽度，然后取所有表格对应列的最大值统一设置，具体步骤如下：

1. 基础CSS配置 #

先给表格和单元格统一设置盒模型，避免边框、内边距影响宽度计算，同时合并表格边框让视觉更统一：

table {
  border-collapse: collapse;
  box-sizing: border-box;
  /* 可选：添加表格间距，根据需求调整 */
  margin: 10px 0;
}
td, th {
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 6px 10px;
}

2. 兼容IE9的JS逻辑 #

核心就是遍历所有目标表格，先计算每一列的最大自然宽度，再把这个宽度同步到所有表格的对应列上。注意IE9不支持NodeList的forEach，所以用传统for循环实现：

function syncTableColumnWidths() {
  // 选择所有需要同步的表格
  const tables = document.querySelectorAll('#table1, #table2, #table3, #table4');
  const targetColumnCount = 4; // 需要同步的列数（1-4列）

  // 遍历每一列，计算并同步宽度
  for (let colIndex = 1; colIndex <= targetColumnCount; colIndex++) {
    let maxColWidth = 0;

    // 第一步：找出当前列在所有表格中的最大宽度
    for (let i = 0; i < tables.length; i++) {
      const currentTable = tables[i];
      // 选中当前表格的第colIndex列的所有单元格（表头+内容）
      const cells = currentTable.querySelectorAll(`td:nth-child(${colIndex}), th:nth-child(${colIndex})`);
      for (let j = 0; j < cells.length; j++) {
        if (cells[j].offsetWidth > maxColWidth) {
          maxColWidth = cells[j].offsetWidth;
        }
      }
    }

    // 第二步：把最大宽度应用到所有表格的对应列
    for (let i = 0; i < tables.length; i++) {
      const currentTable = tables[i];
      const cells = currentTable.querySelectorAll(`td:nth-child(${colIndex}), th:nth-child(${colIndex})`);
      for (let j = 0; j < cells.length; j++) {
        cells[j].style.width = maxColWidth + 'px';
      }
    }
  }
}

// 页面完全加载后执行同步（确保表格内容已渲染）
window.onload = function() {
  syncTableColumnWidths();
  // 窗口大小变化时重新同步（可选，根据需求添加）
  window.addEventListener('resize', syncTableColumnWidths);
};

3. 关键说明与注意点 #

• 为什么不用固定宽/百分比？：这里的maxColWidth是浏览器根据内容自动计算出的自然宽度，完全遵循浏览器默认的表格自适应逻辑，只是把所有表格的对应列统一成最大的那个宽度，既满足自适应又保证列宽一致。
• IE9兼容性：所有API都是IE9原生支持的（querySelectorAll、offsetWidth、addEventListener），没有使用ES6+语法，无需额外polyfill。
• 动态内容处理：如果表格内容是异步加载或动态修改的，需要在内容更新完成后手动调用syncTableColumnWidths()重新计算同步。
• 表头与内容列：代码同时选中了th和td，即使表格有单独的thead和tbody也能正常同步。

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