無法在primeng表中使用粘性header

Question

我正在嘗試將粘性 header 與 p-table 一起使用。 但是我不能這樣做。 我正在使用他們的文檔中提到的 css。 我正在使用primeng 7。請幫忙。 提前致謝。

這是我的模板：

<p-table [columns]="cols" #dt [value]="students" [autoLayout]="true" [paginator]="true" [rows]="100" [rowsPerPageOptions]="[100,200,500]" >
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

</p-table>

我的 Css：

:host ::ng-deep .ui-table .ui-table-thead > tr > th {
            position: -webkit-sticky;
            position: sticky;
            top: 69px;
            box-shadow: 1px 3px 6px 0 rgba(32,33,36,0.10);
        }

        @media screen and (max-width: 64em) {
            :host ::ng-deep .ui-table .ui-table-thead > tr > th {
                top: 99px;
            }
        }

Answer 1

將您的 CSS 粘貼到您的表組件而不是全局組件中：

   :host ::ng-deep .ui-table .ui-table-thead > tr > th {
            position: -webkit-sticky;
            position: sticky;
            top: 69px;
            box-shadow: 1px 3px 6px 0 rgba(32,33,36,0.10);
        }

        @media screen and (max-width: 64em) {
            :host ::ng-deep .ui-table .ui-table-thead > tr > th {
                top: 99px;
            }
        }