Angular如何使表格标题粘

问题描述

我正在制作一个p表，需要使其标题保持顶部，同时向下滚动以查看以下数据。现在，我研究了一些网站，这些网站说我们应该使用<td/>而不是使用<tr/>。我将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>

angular html sticky