粘性表格标题在滚动时使表格行透明

Question

我目前正在尝试表头粘性。我已经实现了它，但问题是当我滚动表格时，粘性表格标题变得透明。

我不知道如何避免这种透明度。请任何人都可以帮助我。

.table-sticky {
    overflow: auto;
    height: 79vh;
    display: inline-block;
}
.spread-table th {
    padding-bottom: 12px;
    background-color: green;
    position: sticky;
    top: 0;
}

<div class="table-sticky">
  <table class="spread-table" #spreadTable>
    <thead>
      <tr>
        <th id="line-item-header" class="line-item-header">
          <button class="header-button line-item-header"></button>
        </th>
            <th *ngFor="let spreadColumn of spreadColumns">
               <button>{{spreadColumn}}</button></th>
      </tr>
    </thead>

    <tbody *ngFor="let lineitem of dataSource; let i = index">
      <tr>
        <td>
          <app-child-table [items]="lineitem.children">
          </app-child-table>
        </td>
      </tr>

      <tr>
        <td class="line-item-data">
            <mat-form-field>
              <input matInput [value]="lineitem.lineItem" [id]="'line_'+lineitem.id">
            </mat-form-field>
        </td>

        <td *ngFor="let spreadColumn of spreadColumns">
          <mat-form-field>
            <input matInput [id]="lineitem.id+'_line_'+spreadColumn"
              [value]="lineitem[spreadColumn]?.value===undefined? null:lineitem[spreadColumn]?.value">
          </mat-form-field>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您是否尝试过将标题 z-index 设置为高于表主体？

https://developer.mozilla.org/de/docs/Web/CSS/z-index

.thead{ z-index: 15;} .tbody{ z-index: 15;}