Mat-Table 滚动时上方菜单重叠

Question

我有一个 mat-toolbar 放在 mat-table 上面 mat-tab，我想保留工具栏和 table header 始终可见，但是，当我向下滚动页面时，工具栏会与 table 重叠。 header 向上滚动到 mat-tab 的顶部，我似乎无法让 table header 停止在 [=39= 的底部].

环顾四周，人们建议使用粘滞位置 css 属性，这可以让我的工具栏可见，但 table header 仍然重叠。我不确定如何解决这个问题。下面的示例：

滚动前 header 位置的图像

滚动后 header 位置的图像

布局

<mat-tab-group>
    <mat-tab>
        <div fxLayout="column">
            <mat-toolbar fxLayout="row" fxLayoutAlign="start space-between" ngClass="table-toolbar sticky-top">
                ....BUTTONS....
            </mat-toolbar>
            <div fxLayout="column">
                <table mat-table [dataSource]="dataSource">
                    ....TABLE....
                    <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
                    <tr mat-row *matRowDef="columns: columns;"></tr>
                </table>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>

样式

.table-toolbar {
    height: 80px !important;
    padding-left: 24px !important;
    min-height: 80px !important;
}

.sticky-top {
    top: 0 !important;
    z-index: 1000 !important; // This only makes it appear above or below the table
    position: sticky;
}

Answer 1

您可以尝试覆盖 mat-table header 顶部位置。通常它设置为 0，您可以覆盖到您需要的像素。这是例子。 https://stackblitz.com/angular/glmqladoole

.mat-table-sticky{
  top:80px !important;

}

Mat-Table 滚动时上方菜单重叠

Mat-Table overlapping menu above when scrolling

html

css

angular

mat-tab

mat-table