如何确定窗口收缩时表格列的最小宽度？实现两表格列宽同步

核心思路：基于内容尺寸判断列的最小边界 #

要解决列宽舍入误差导致的过早设置min-width问题，关键是不直接对比两列的宽度，而是判断单列表格单元格是否已经达到内容的最小显示宽度，以下是几种实用方法：

• 用scrollWidth和clientWidth做边界判断
  给表格单元格设置overflow: hidden，此时如果单元格的scrollWidth（内容实际宽度）大于clientWidth（可视宽度），说明单元格已经无法再缩小——再缩小就会截断内容。这个判断完全基于单元格自身的内容尺寸，不会受另一表格列宽的舍入误差影响。

• 计算内容的真实最小宽度
  如果担心scrollWidth的兼容性，可以用临时元素计算最小宽度：

  1. 克隆目标单元格的内容和样式（排除宽度、定位相关属性）
  2. 将克隆的元素设为position: absolute; visibility: hidden; white-space: nowrap;，插入到页面中
  3. 获取该元素的offsetWidth，这就是该列内容的最小宽度
  4. 当目标单元格的实际宽度小于等于这个值时，判定为已达最小尺寸

• 优化宽度对比的容差策略
  如果一定要对比两列宽度，别直接用整数宽度比较，改用getBoundingClientRect().width获取精确的浮点宽度，同时设置一个极小的容差（比如1px），只有当两列宽度差超过容差，且其中一列已达最小内容宽度时，再给另一列设置min-width。

代码示例（scrollWidth方案） #

// 判断单元格是否已达最小宽度
function isColumnAtMin(cell) {
  cell.style.overflow = 'hidden';
  return cell.scrollWidth > cell.clientWidth;
}

// 监听尺寸变化同步列宽
window.addEventListener('resize', () => {
  const table1Headers = document.querySelectorAll('#table1 th');
  const table2Headers = document.querySelectorAll('#table2 th');

  table1Headers.forEach((header, idx) => {
    const targetHeader = table2Headers[idx];
    if (isColumnAtMin(header)) {
      targetHeader.style.minWidth = `${header.offsetWidth}px`;
    } else {
      targetHeader.style.minWidth = '';
    }
  });
});

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