无法在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;
            }
        }