如何使Mat-Tab表标题粘稠

Question

在我的应用程序中，我有一个带有3个选项卡的屏幕。在其中一个选项卡中，有一个表，该表包含大量行。这就是为什么我想让表的标题变得粘稠。当我必须向下滚动时，才能看到标题名称。我尝试了下面的方法，但没有什么改变。我该怎么做才能使标题变得粘稠？

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

标签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;
  }

Answer 1

尝试删除所有粘性指令和样式，只需像您一样将行<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>与粘滞放在一起。

这是一个stackblitz样本，我要用粘粘的方式工作。它可能对你有用，作为参考-