如何使两个同列跨度的表格自动保持相同列宽且最小化组件改动？

算力阿峰

2026-6-23

实现同模型表格的列宽同步（仅修改Table B）

核心思路

保留表格默认的table-layout: auto自动列宽逻辑，通过JavaScript获取Table A的实际渲染列宽，同步设置给Table B，全程无需修改Table A的结构或逻辑。

具体实现步骤

1. 获取Table A的列宽数据

先获取Table A表头行（或数据第一行）每个单元格的实际渲染宽度：

// 替换成你的Table A选择器，比如类名或id
const tableA = document.querySelector('.table-a');
// 取第一行的单元格计算宽度
const colWidths = Array.from(tableA.rows[0].cells).map(cell => cell.offsetWidth);

2. 给Table B同步列宽

推荐使用<colgroup>来批量设置列宽，比逐个修改单元格更高效：

// 替换成你的Table B选择器
const tableB = document.querySelector('.table-b');

// 创建colgroup并插入到Table B最前面
const colGroup = document.createElement('colgroup');
colWidths.forEach(width => {
  const col = document.createElement('col');
  col.style.width = `${width}px`;
  colGroup.appendChild(col);
});
tableB.insertBefore(colGroup, tableB.firstChild);

3. 适配窗口大小变化（可选）

如果窗口缩放会导致Table A列宽重新计算，添加resize事件监听同步更新：

window.addEventListener('resize', () => {
  const newColWidths = Array.from(tableA.rows[0].cells).map(cell => cell.offsetWidth);
  const cols = tableB.querySelectorAll('colgroup col');
  newColWidths.forEach((width, index) => {
    if (cols[index]) cols[index].style.width = `${width}px`;
  });
});