时间戳

首页 > 解决方案 > Angular如何使表头变粘

html - 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;
}

标签： htmlcssangularsticky

解决方案

尝试这个

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

推荐阅读