La propiedad adhesiva angular no funciona en la tabla

En mi código, tengo una tabla con una gran cantidad de filas. Por lo tanto, quiero que los encabezados de la tabla se fijen cuando me desplace hacia abajo. Agregué la stickypropiedad a mi HTML, pero eso no funcionó. Incluso agregué sticky a los encabezados uno por uno. Aquí está mi código y cómo se ve mi tabla. ¿Qué debo hacer para arreglar esto?

• Cuando me desplazo hacia abajo;

HTML:

<div class="mat-elevation-z2 responsive-grid m-4 mt-16">
 <div fxLayout="column" fxFlex class="mt-16 mat-elevation-z2 responsive-grid">
 <form class="w-100-p" #workItemForm>
 <table mat-table matSort #table [dataSource]="dataSource" class="w-100-p" style="overflow: auto;">
 <ng-container matColumnDef="UnitType">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" sticky>
  <b>
  Birim
  </b>
  </th>
  <td mat-cell *matCellDef="let row; let i = index"
  [ngStyle]="{'color': row.TotalRequiredQuantity == 0? '#046307': ' #E41B17'}">
  <div>
  {{row.UnitType?.Name}}
  </div>
  </td>
 </ng-container>
 <ng-container matColumnDef="TotalRequestedQuantity">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" sticky>
  <b>
  Planlanan Miktar
  </b>
  </th>
  <td mat-cell *matCellDef="let row; let i = index"
  [ngStyle]="{'color': row.TotalRequiredQuantity == 0? '#046307': ' #E41B17'}">
  <div>
  {{row.TotalRequestedQuantity | number}}
  </div>
  </td>
 </ng-container>
 <ng-container matColumnDef="AvailableStockQuantity">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" sticky>
  <b>
  Kullanılabilir Stok Miktarı
  </b>
  </th>
  <td mat-cell *matCellDef="let row; let i = index"
  [ngStyle]="{'color': row.TotalRequiredQuantity == 0? '#046307': ' #E41B17'}">
  <div>
  {{row.AvailableStockQuantity | number}}
  </div>
  </td>
 </ng-container>
 <ng-container matColumnDef="TotalOrderedQuantity">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" sticky>
  <b>
  Sipariş Edilen Miktar
  </b>
  </th>
  <td mat-cell *matCellDef="let row; let i = index"
  [ngStyle]="{'color': row.TotalRequiredQuantity == 0? '#046307': ' #E41B17'}">
  <div>
  {{row.TotalOrderedQuantity | number}}
  </div>
  </td>
 </ng-container>
 <ng-container matColumnDef="TotalRequiredQuantity">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" sticky>
  <b>
  Planlanan İhtiyaç Miktarı
  </b>
  </th>
  <td mat-cell *matCellDef="let row; let i = index"
  [ngStyle]="{'color': row.TotalRequiredQuantity == 0? '#046307': ' #E41B17'}">
  <div>
  <b>
  {{row.TotalRequiredQuantity | number}}
  </b>
  </div>
  </td>
 </ng-container>
 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
 </table>
 </form>
 <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" class="mat-paginator-sticky"></mat-paginator>
 </div>

Solución del problema

¿Quiere decir que la posición de la propiedad css es pegajosa?

deberías crear una clase como:

.sticky {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
}

y agréguelo al pie de foto o tr si desea permanecer en la parte superior

Ejemplo:

<table>
<tr class="sticky">
<td>
I will stick to the screen when you reach my scroll position</td>
</tr>
<tr>
<td>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget (ADD VERY LONG TEXT HERE)</p>
</td>
</tr>
</table>