如何实现左侧3列无重叠的粘性可滚动表格（含粘性表头）

核心原因 #

你现在写死的left:20px、left:40px和列实际渲染宽度不匹配，是出现重叠的根本原因。同时你没有给左侧粘性的td设置背景色，滚动时内容透出也会产生重叠的视觉效果。

方案1：纯CSS固定列宽（最简单，无需JS） #

适合列宽可以预设的场景，直接给前三列设置固定宽度，再匹配对应的left值即可：

/* 新增：给前三列设置统一固定宽，数值可按需调整 */
th:nth-child(1), td:nth-child(1) {
  min-width: 120px;
  max-width: 120px;
}
th:nth-child(2), td:nth-child(2) {
  min-width: 90px;
  max-width: 90px;
}
th:nth-child(3), td:nth-child(3) {
  min-width: 140px;
  max-width: 140px;
}

/* 新增：给粘性td设置背景，避免内容透出 */
td:nth-child(-n+3) {
  background: white;
}

/* 修改原有left值，和前序列宽总和匹配 */
th:nth-child(2), tr td:nth-child(2) {
  left: 120px; /* 等于第一列宽度 */
}
th:nth-child(3), tr td:nth-child(3) {
  left: 210px; /* 等于第一列+第二列宽度总和：120+90 */
}

/* 删掉你原有th:first-child里的right:0，该属性无作用还可能引发布局异常 */

另外建议给表格套一个横向滚动容器，优化滚动体验：

<div style="overflow-x: auto; max-width: 100%;">
  <!-- 原有table代码放在这里 -->
</div>

方案2：JS动态计算偏移（适配动态列宽） #

如果你的列宽需要随内容自适应，不需要固定值，可以用JS自动计算每列的实际宽度，动态设置left属性：

window.addEventListener('load', () => {
  // 取首行前三列作为宽度计算基准
  const firstRowCols = document.querySelectorAll('tbody tr:first-child td:nth-child(-n+3)')
  let offsetLeft = 0
  firstRowCols.forEach((col, index) => {
    const colWidth = col.offsetWidth
    // 给对应列的所有th、td设置left值
    document.querySelectorAll(`th:nth-child(${index+1}), td:nth-child(${index+1})`).forEach(el => {
      el.style.left = `${offsetLeft}px`
    })
    offsetLeft += colWidth
  })
})

使用这个方案不需要提前设置列宽，也不需要写死left值，完全自适应内容宽度，不会出现重叠。

额外注意事项 #

• z-index层级要正确：表头th的z-index要高于左侧粘性td，保证纵向滚动时表头始终在最上层
• 所有粘性单元格必须设置不透明背景，避免滚动时后方内容透出

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