HTML表格粘性旋转表头文本被背景遮挡的原因及解决求助

核心问题在于transform属性会创建独立的堆叠上下文，再加上<th>的白色背景，导致旋转后的文本被表头背景覆盖。同时<th>的高度未适配旋转元素的尺寸，进一步加剧了遮挡。

解决方案 #

通过调整表头高度、优化旋转元素的层级与定位，就能解决遮挡问题：

修改后的CSS #

.rotated-header{
  width: 30px;
  height: 80px;
  position: relative;
  /* 调整偏移值，让旋转文本更居中，减少超出范围 */
  transform: translate(0, 40px) rotate(315deg);
  white-space: nowrap;
  /* 提升层级，确保在表头背景上方 */
  z-index: 2;
  background: transparent;
}

.header {
  vertical-align: bottom;
  /* 设置最小高度，适配旋转元素的实际占用空间 */
  min-height: 100px;
  position: relative;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}

/* 可选：添加边框辅助布局查看 */
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

修改后的HTML #

<div class="tableFixHead">
  <table>
  <thead>
    <tr>
      <th class="header">Asset</th>
      <th class="header">
        <div class="rotated-header">
          <span>Rotated row 1</span>
        </div>
      </th>
      <th class="header">
        <div class="rotated-header">
          <span>Rotated row 2</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
  </tbody>
  </table>
</div>

关键修改说明 #

1. 表头高度适配：给.header设置min-height: 100px，确保旋转元素有足够的显示空间，不会被表头截断。
2. 层级调整：给.rotated-header设置z-index: 2，由于transform创建了独立堆叠上下文，这个层级会在<th>的堆叠上下文中生效，让文本显示在白色背景上方。
3. 定位优化：调整translate参数，让旋转后的文本更贴合表头区域，减少不必要的偏移导致的遮挡。

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