[英]Angular how to make table header sticky
我正在制作一个 p 表,它需要在向下滚动以查看下面的数据时使其标题保持在顶部。 现在,我研究了一些网站,说我们应该使用<tr/>
而不是使用<td/>
> 。 我把html的包裹层改成了<tr/>
还是不行。 我还尝试了不同的 css 写入方式,但都无法显示结果。 我被这个问题困扰了一整天。 关于我的代码的任何想法都会有很大帮助。
这是我的代码:(html)
<div>
<p-table [columns]="columnName" [value]="reslts" selectionMode="single" [autoLayout]="true" class="table">
<ng-template pTemplate="colgroup" let columns>
<colgroup>
<col *ngFor="let col of columns" [style.width]="col.width">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let columns>
<tr>
<th
class="p-1"
*ngFor="let col of columns"
[style.width]="col.width"
[pSelectableColumn]="col.field"
>
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template
pTemplate="body"
let -rowData let-columns="columns"
let-rowIndex="rowIndex"
>
<tr [pSelectableRow]="rowData">
<td> {{rowData.Monday}}</td>
<td>{{rowData.Tuesday}}</td>
<td>{{rowData.Wednesday}}</td>
........
</tr>
</ng-template>
</p-table>
</div>
我的 css 代码:
.td.header{
position:sticky;
top:0px;
}
尝试这个
<div class="table-container">
<!-- table markup -->
</div>
<style>
.table-container {
position: relative;
/* max-height: some value; */
}
.td.header {
position: absolute;
top: 0px;
/* if header shrinks due to absolute positioning */
/* left: 0px; */
/* right: 0px; */
/* or */
/* width: 100%; */
/* if header goes below content */
/* z-index: some high enough value; */
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.