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


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.
the image of my 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>
        <th id="line-item-header" class="line-item-header">
          <button class="header-button line-item-header"></button>
            <th *ngFor="let spreadColumn of spreadColumns">

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

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

        <td *ngFor="let spreadColumn of spreadColumns">
            <input matInput [id]="lineitem.id+'_line_'+spreadColumn"
              [value]="lineitem[spreadColumn]?.value===undefined? null:lineitem[spreadColumn]?.value">


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


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

Leave a Reply

(*) Required, Your email will not be published