css - 带粘性标题的角材料表
问题描述
我将 angular7 与 Angular 材料设计模板一起使用。目前,我的结果如下,
但我希望我的结果如下。粘性标题下的滚动条。
我放了一些演示代码和现场演示作为您的参考。
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%;
}
解决方案
您可以使用两个表来做类似的事情,一个用于标题,另一个用于数据。请参阅工作演示。
推荐阅读
- shell - 如何从 shell 中的日志“更新 2f8b547d..eb94967a 快进....”中获取“2f8b547d..eb94967a”字符串?
- regex - 为连续完整日志文件中的每个部分匹配 REGEX
- mongodb - 在 $ 或 mongodb 中使用 $text 搜索
- android - 在 Android Studio 中使用 Jpeg UI 布局
- javascript - 用于音乐可视化器的嵌套 For 循环不迭代 (p5.js)
- vim - 在 Vim 中移动代码折叠
- python - ImportError: 无法从 'hymnbook.models.author' 导入名称 'Author' (C:\..\hymnbook\models\author.py)
- python - tkinter 滚动条未按预期应用选项
- typescript - 如何访问内联子类型
- sql - 快速 Spark 替代 WHERE 列 IN other_column