我将 angular7 与 Angular Material 设计模板一起使用。目前,我的结果如下,
但我希望我的结果如下。粘性标题下的滚动条。
我放了一些演示代码和live demo作为引用。
HTML
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
CSS
.example-container {
height: 400px;
overflow: auto;
}
table {
width: 100%;
}
最佳答案
您可以使用两个表来做类似的事情,一个用于标题,另一个用于数据。请参阅工作 demo .
关于css - 带粘性标题的 Angular Material 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58618143/