Angular如何使表头变粘答案

【问题标题】：Angular how to make table header stickyAngular如何使表头变粘
【发布时间】：2020-08-18 13:55:56
【问题描述】：

我正在制作一个 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;
}

【问题讨论】：

标签： html css angular sticky

【解决方案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>

【讨论】：