HTML表格滚动时行列表头固定异常：重叠问题排查

问题现象 #

实现表格左侧3列、顶部1行冻结时，出现两个异常：

• 横向滚动时，第二行及以下的表头会覆盖左侧固定列
• 纵向滚动时，tbody的行内容会穿透覆盖左侧固定列

问题根源 #

1. 左侧固定列的<th>未设置背景色，滚动时下方内容会透显出来
2. 非首行的表头<th>未指定z-index，默认层级与左侧列一致甚至更高，滚动时发生覆盖
3. 原有z-index层级逻辑存在漏洞：首行表头z-index(15)高于左侧列(10)，但左侧列需要能覆盖其他行的表头

修复方案 #

核心调整逻辑 #

1. 给左侧固定列的<th>添加白色背景，避免透明穿透
2. 给所有非首行的表头<th>设置更低的z-index，确保左侧固定列层级更高
3. 优化z-index层级体系，让左侧固定列能覆盖普通表头和tbody内容

修改后的脚本代码 #

document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector("table");
  const headers = table.querySelectorAll("th");
  const rows = table.querySelectorAll("tr");

  let leftOffset = 0;

  // 处理左侧3列固定
  for (let i = 0; i < 3; i++) {
    const columnWidth = headers[i].offsetWidth;

    headers[i].style.position = "sticky";
    headers[i].style.left = `${leftOffset}px`;
    headers[i].style.zIndex = "10";
    headers[i].style.background = "#fff"; // 添加背景色防止内容穿透

    rows.forEach(row => {
      const cell = row.cells[i];
      if (cell) {
        cell.style.position = "sticky";
        cell.style.left = `${leftOffset}px`;
        cell.style.zIndex = "5";
        cell.style.background = "#fff";
      }
    });

    leftOffset += columnWidth;
  }

  // 处理首行表头固定
  const firstRow = table.querySelector("tr");
  if (firstRow) {
    firstRow.querySelectorAll("th").forEach(header => {
      header.style.position = "sticky";
      header.style.top = "0px";
      header.style.zIndex = "15";
      header.style.background = "#fff"; // 首行表头添加背景色
    });
  }

  // 处理首行左侧3列的交叉区域（最高层级）
  for (let i = 0; i < 3; i++) {
    const cell = firstRow.cells[i];
    if (cell) {
      cell.style.zIndex = "20";
      cell.style.background = "#fff";
    }
  }

  // 给非首行的所有表头设置更低的z-index，避免覆盖左侧固定列
  rows.forEach((row, index) => {
    if (index !== 0) { // 跳过首行
      row.querySelectorAll("th").forEach(th => {
        th.style.zIndex = "8"; // 低于左侧列的10，确保左侧列显示在上方
        th.style.background = "#fff";
      });
    }
  });
});

关键调整点说明 #

• 所有固定元素添加background: #fff：彻底解决内容穿透问题
• 非首行表头z-index设为8：低于左侧固定列的10，横向滚动时左侧列会显示在上方
• 首行表头z-index保持15：确保首行能盖过所有内容；交叉区域z-index20：保持左上角固定区域的最高层级

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