Angular Making Headers Sticky

In my app, I have a screen with 3 tabs. Inside one of those tabs, there is a table and the table contains a large amount of rows. That’s why I want to make the headers of the table sticky. To be able to see the header names when I have to scroll down. I tried the approach below and nothing has changed. What should I do to make the headers sticky?

Main HTML:

    <mat-tab-group class="w-100-p" fxFill style="height:100vh;">
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="mr-8">shopping_basket</mat-icon>
                Plan Çalışma Parametreleri
            </ng-template>
            <tab-material-plan-items [MaterialPlan]="materialPlan"
                [(MaterialPlanParameters)]="materialPlan.MaterialPlanParameters"
                [MaterialPlanId]="materialPlan.MaterialPlanId"></tab-material-plan-items>
        </mat-tab>
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="mr-8">shopping_basket</mat-icon>
                Ürün/Reçete Bazlı Sonuçlar
            </ng-template>
            <tab-material-plan-receipt-result [MaterialPlan]="materialPlan"
                [(MaterialPlanReceiptResult)]="materialPlan.MaterialPlanReceiptResults"
                [MaterialPlanReceiptResultId]="materialPlan.MaterialPlanId"></tab-material-plan-receipt-result>
        </mat-tab>
    </mat-tab-group>

Tab HTML:

<form class="w-100-p" #workItemForm>
        <table mat-table matSort #table [dataSource]="dataSource" class="w-100-p" style="overflow: auto;">
            <ng-container matColumnDef="TotalOrderedQuantity">
                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" class="sticky" 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'}" class="sticky" 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" class="sticky"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
        </table>
    </form>
    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" class="sticky"></mat-paginator>

CSS:

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