table合并行列position: sticky出现重叠遮挡

Question

合并行、列使用position: sticky出现表头只显示一行并且重叠了，合并的列也被遮挡。

<style>
  /* 设置表格容器的样式 */
  .table-container {
    max-height: 300px; /* 设置表格容器的最大高度 */
    overflow-y: auto; /* 设置垂直方向滚动条 */
  }

  /* 设置冻结表头的样式 */
  .frozen-header {
    position: sticky;
    top: 0;
    background-color: #f7f7f7;
    z-index: 999; /* 设置表头层级，防止被表格内容遮挡 */
  }

  /* 设置冻结列的样式 */
  .frozen-column {
    position: sticky;
    left: 0;
    background-color: #f7f7f7;
    z-index: 998; /* 设置列头层级，保证表头在列头之上 */
  }
  
</style>

<div class="table-container">
  <table id="deptTrainingReport" cellpadding="1" cellspacing="0" border="1px" width="3400px" table-layout="fixed">
    <!-- 表头 -->
    <thead>
      <tr class="frozen-header">
        <th id="deptReportName" height="50px" style="font-size: 20px; padding-left: 500px; text-align: left" colspan="25">
          中国区-各部门-每月培训数据汇总
        </th>
      </tr>
      <tr class="frozen-header">
        <!-- 冻结的表头 -->
        <th rowspan="2" >序号</th>
        <th rowspan="2" class="frozen-column">部门</th>
        <th colspan="3">年度数据</th>
        <th colspan="5">4月份数据</th>
        <th colspan="5">5月份数据</th>
        <th colspan="5">6月份数据</th>
        <th colspan="5">7月份数据</th>
      </tr>
      <tr class="frozen-header">
        <!-- 冻结的表头 -->
        <th>年度总课程门数</th>
        <th>目前已完成课程数</th>
        <th>达成率</th>
        <th>计划培训课程数</th>
        <th>实际完成课程数</th>
        <th>培训计划达成率</th>
        <th>月度学习总人数</th>
        <th>当月培训讲师数</th>
        <th>计划培训课程数</th>
        <th>实际完成课程数</th>
        <th>培训计划达成率</th>
        <th>月度学习总人数</th>
        <th>当月培训讲师数</th>
        <th>计划培训课程数</th>
        <th>实际完成课程数</th>
        <th>培训计划达成率</th>
        <th>月度学习总人数</th>
        <th>当月培训讲师数</th>
        <th>计划培训课程数</th>
        <th>实际完成课程数</th>
        <th>培训计划达成率</th>
        <th>月度学习总人数</th>
        <th>当月培训讲师数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
      <tr>
        <!-- 表格内容 -->
        <td style="text-align: center;">1</td>
        <td style="text-align: center;" class="frozen-column">人事行政部</td>
        <td style="text-align: center;">11</td>
        <td style="text-align: center;">1</td>
        <td style="text-align: center;">50%</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

【相关推荐】

• 看下这篇博客，也许你就懂了，链接：实现table左边固定，右侧滚动 --position:sticky属性在ios真机不生效

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^