Angular 15中PrimeNG p-table表头sticky属性失效求助

针对你升级PrimeNG到15后表头固定失效的问题，可通过以下步骤修复：

1. 必须设置scrollHeight属性 #

当scrollable="true"时，必须指定scrollHeight，否则表格容器会自适应内容高度，不会出现滚动条，sticky定位自然无法触发。可根据布局需求设置固定值或动态计算值：

<p-table [value]="data" [scrollable]="true" [scrollHeight]="'calc(100vh - 200px)'">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of columns; let i = index">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <tr>
            <td *ngFor="let col of columns">
                {{ data[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-table>

2. 更新CSS选择器并补充必要样式 #

PrimeNG 15对table组件的DOM结构和类名做了调整，原有的.p-datatable选择器可能不再匹配，同时需要添加背景色和z-index防止表头被内容穿透：

:host ::ng-deep .p-table .p-table-thead > tr > th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff; /* 替换为你的主题背景色 */
}

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

3. 排查父容器样式冲突 #

确保p-table的所有父容器没有设置overflow: hidden、transform或perspective属性，这些属性会破坏sticky定位的生效条件。如果父容器必须使用overflow，可将table放在一个独立的、无overflow:hidden的容器内。

4. 检查是否有样式覆盖 #

通过浏览器开发者工具查看表头th元素的position属性，确认没有其他CSS规则将其重置为static或其他值，如有则调整样式优先级。

内容的提问来源于stack exchange，提问作者Hani