Angular 9中如何固定Angular Material表格表头？

针对你使用Angular 9、Angular Material和Tailwind CSS实现表头随页面滚动固定的需求，以下是几种可行的解决方案：

方案1：使用Angular Material官方自带的stickyHeader属性 #

Angular Material的mat-table原生支持表头固定，直接给表格添加stickyHeader属性即可，无需额外编写复杂CSS：

<table @stagger mat-table [dataSource]="dataSource" matSort [stickyHeader]="true">
    <ng-container *ngFor="let column of columns; trackBy: trackByProperty">
        <ng-container *ngIf="column.type === 'text'" [matColumnDef]="column.property">
            <th *matHeaderCellDef class="uppercase" mat-header-cell mat-sort-header>
                {{ column.label }}
            </th>
            <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell>
                {{ row[column.property] }}
            </td>
        </ng-container>
    </ng-container>

    <!-- 必须补充表头行与数据行的渲染代码（你之前的代码缺失这部分） -->
    <tr mat-header-row *matHeaderRowDef="columns.map(col => col.property)"></tr>
    <tr mat-row *matRowDef="let row; columns: columns.map(col => col.property);"></tr>
</table>

注意：完整的mat-table结构必须包含mat-header-row和mat-row，否则表头的sticky定位无法生效。

方案2：修复自定义Sticky样式的生效问题 #

如果坚持使用自定义CSS/Tailwind类，需要解决几个常见的失效原因：

1. 清除父容器的阻断属性 #

检查表格的父元素是否设置了overflow: hidden、overflow: auto或transform属性，这些属性会导致position: sticky失效。若存在此类属性，直接移除，或者将滚动容器调整为更高层级的元素（比如body）。

2. 给表头单元格添加完整定位样式 #

给mat-header-cell添加Tailwind类或自定义CSS，同时设置背景色避免内容穿透：

<th *matHeaderCellDef class="uppercase sticky top-0 z-50 bg-white" mat-header-cell mat-sort-header>
    {{ column.label }}
</th>

或使用自定义CSS：

.mat-header-cell {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: white;
}

3. 处理边框重叠问题 #

若表头与数据行出现边框重叠，可给表头添加下边框，或给数据行添加上边框：

.mat-header-cell {
    border-bottom: 2px solid #e0e0e0;
}
.mat-row {
    border-top: 1px solid #f5f5f5;
}

方案3：封装滚动容器（适用于表格在固定高度容器内的场景） #

如果表格嵌套在固定高度的容器内滚动，需给容器设置overflow: auto，让表头相对于容器固定：

<div class="h-[600px] overflow-auto">
    <table mat-table [dataSource]="dataSource" matSort>
        <ng-container *ngFor="let column of columns; trackBy: trackByProperty">
            <ng-container *ngIf="column.type === 'text'" [matColumnDef]="column.property">
                <th *matHeaderCellDef class="uppercase sticky top-0 z-50 bg-white" mat-header-cell mat-sort-header>
                    {{ column.label }}
                </th>
                <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell>
                    {{ row[column.property] }}
                </td>
            </ng-container>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="columns.map(col => col.property)"></tr>
        <tr mat-row *matRowDef="let row; columns: columns.map(col => col.property);"></tr>
    </table>
</div>

此时需确保容器高度固定，sticky的top:0是相对于该容器生效的。

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