2

我在 a 的mat-toolbar上方放置了mat-tablea mat-tab，我想让工具栏和表格标题始终可见，但是，当我向下滚动页面时，工具栏会与表格重叠。标题向上滚动到顶部，mat-tab我似乎无法让表格标题停在垫子工具栏的底部。

环顾四周，人们建议使用粘性位置 css 属性，它可以使我的工具栏保持可见，但表格标题仍然重叠。我不知道如何解决这个问题。下面的例子：

滚动前标题位置的图像 滚动前标题位置的图像

滚动后标题位置的图像 滚动后标题位置的图像

布局

<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;
}
4

1 回答 1

2

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

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

}

于 2020-06-13T10:56:00.220 回答