[Fixed] sticky table header transparent the table rows while scrolling

Issue

I am currently experimenting with table header sticky. I have achived it but the problem is with the sticky table header become transparent while I am scrolling the table.

I don’t know how to avoid this transparency. Please anyone can help me.

.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>

Solution

Have you tried setting the Header z-index to higher than the Table body?

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

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