在Angular/Material中的选项卡内有多个粘性标题行

Question

我按照Angular Material网站上的示例创建了一个具有多个粘性标题行的表。这非常有效。但是，当我把表移到选项卡中时，当我向下滚动时，只有一行会粘住。这能修好吗？

https://stackblitz.com/edit/angular-bklajw-3zzcw7

请注意，当您在第一个表中向下滚动时，前两行是如何固定的。但当你在第二张表中向下滚动时，只有第二行会粘住。

Answer 1

您可以显式应用position: sticky，并将top设置为第二行标头(即top: 56px(的上一行的高度，这将使第二行标题也具有粘性。这是您需要添加的CSS。

.mat-header-row:nth-child(2) {
position: sticky;
top: 56px;
}

这里是应用了这个更改的分叉示例。https://angular-bklajw-rqkyjm.stackblitz.io

谢谢。

Answer 2

粘性位置在运行时应用。你可以尝试使用css来修复它。

• 首先在第二行添加一个类

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="second-row"></tr>

• 添加以下css以设置顶部位置。55px是第一排

.second-row .mat-header-cell.mat-table-sticky {
top: 55px !important;
}

工作示例：-https://angular-bklajw-rwgxn9.stackblitz.io

不是最干净的解决方案，但会完成工作。