表格首列动态粘性布局问题：含rowspan时z-index被覆盖

我尝试给表格首列设置动态粘性效果，无rowspan属性时功能正常，但遇到含rowspan的表格时，首列会被最后一个td的z-index覆盖。以下是相关代码示例：

原始代码 #

CSS #

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top
}

HTML #

<table class="tg">
  <thead>
    <tr>
      <td class="tg-0pky" rowspan="3"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
    </tr>
    <tr>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
    </tr>
    <tr>
      <td class="tg-0pky" colspan="3"></td>
    </tr>
    <tr>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
    </tr>
  </thead>
</table>

解决方案 #

要解决这个问题，核心是确保首列（尤其是含rowspan的单元格）拥有足够高的层级，避免被其他单元格覆盖。修改后的CSS如下：

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top;
}

/* 首列粘性基础样式 */
.tg td:first-child {
  position: sticky;
  left: 0;
  background-color: #ffffff; /* 添加背景色防止滚动时内容穿透 */
  z-index: 10; /* 设置基础层级 */
}

/* 给含rowspan的首列单元格提升层级 */
.tg td:first-child[rowspan] {
  z-index: 20; /* 更高层级确保不会被后续行单元格覆盖 */
}

说明 #

• position: sticky和left: 0是实现粘性效果的核心属性，必须配合使用。
• 添加background-color是为了避免滚动时，下方单元格的内容透过粘性单元格显示出来。
• 给含rowspan的首列单元格单独设置更高的z-index，因为这类单元格会跨越多行，容易被后续行的单元格覆盖，更高的层级能确保它始终显示在最上层。

内容的提问来源于stack exchange，提问作者Fernando Piacezzi Ferreira