如何在滚动时固定表格中带有rowspan的td内文本

你的问题出在：带rowspan的单元格本身高度是合并12行的总高度，当滚动到该单元格的底部边界时，position: sticky元素会跟着单元格一起移出视口，导致Content A提前消失。

修改后的代码方案 #

CSS 代码

.scroll-container {
  height: 200px;
  overflow: auto;
  position: relative;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 8px;
  border: 1px solid #ccc;
}

.sticky-cell {
  background-color: #f1f1f1;
  vertical-align: top; /* 避免单元格内容错位 */
}

.sticky-text {
  background-color: #f1f1f1;
  position: sticky;
  top: 20px; /* 固定在视口上方20px位置，可按需调整 */
  z-index: 2; /* 防止被其他单元格内容覆盖 */
}

HTML 代码

<div class="scroll-container">
  <table>
    <tbody>
      <tr>
        <td class="sticky-cell" rowspan="12"><span class="sticky-text">Content A</span></td>
        <td>Content B</td>
      </tr>
      <tr>
        <td>Content C</td>
      </tr>
      <tr>
        <td>Content D</td>
      </tr>
      <tr>
        <td>Content F</td>
      </tr>
      <tr>
        <td>Content E</td>
      </tr>
      <tr>
        <td>Content G</td>
      </tr>
      <tr>
        <td>Content H</td>
      </tr>
      <tr>
        <td>Content I</td>
      </tr>
      <tr>
        <td>Content J</td>
      </tr>
      <tr>
        <td>Content K</td>
      </tr>
      <tr>
        <td>Content L</td>
      </tr>
    </tbody>
  </table>
</div>

关键修改说明 #

• 移除了.sticky-cell的position: sticky设置，避免rowspan单元格的高度限制sticky元素的作用范围
• 直接给Content A的span设置position: sticky，让它基于滚动容器固定位置，只要表格未完全滚出容器，就会保持固定
• 如果需要固定在容器底部，把top:20px改成bottom:20px即可

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