Angular 如何让 table header 变粘

Question

我正在制作一个 p-table，它需要在向下滚动以查看下方数据时将其标题固定在顶部。现在，我研究了一些网站说我们应该使用 <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;
}

Answer 1

试试这个

<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>

Angular 如何让 table header 变粘

Angular how to make table header sticky

html

css

sticky

angular