粘性表格标题滚动问题

Posted 2023-03-06

【中文标题】粘性表格标题滚动问题

【英文标题】：Sticky Table Header Scrolling Issue

【发布时间】：2020-10-15 03:14:59

【问题描述】：

您好，我遇到了粘性标题的问题。我有三列，但最后一列，当我滚动时，数据决定与我的标题重叠。我不确定它为什么这样做。提前致谢！

问题的屏幕截图：

我的 CSS 代码：

.Job-Report-Table 
      position: relative;
      display: flex;
      border-bottom: 2px solid #414141;
      max-height: 450px;
      overflow-y: scroll;
      thead th 
        position: sticky;
        top: 0;
      
      .table 
        .tableHeader 
          font-size: 16px;
          color: #414141;
          // background-color: #d8d8d8;
          .cell-1 
            background-color: #5b5b5b;
            color: #ffffff;
            vertical-align: middle;
          
          .cell-2 
            vertical-align: middle;
            background-color: #d8d8d8;
          
          .cell-3 
            vertical-align: middle;
            background-color: #d8d8d8;
          
     

【参考方案1】：

z-index 福利。

您应该将z-index 设置为thead th 上的适当（更高）值。如果没有指定其他 z-index 值，则 1 就足够了。