0

当我滚动它时，我试图让primeng表的标题固定（粘在顶部）。我完全按照primeng docs网站上的教程进行操作。 https://primefaces.org/primeng/showcase/#/table/sticky。

我的 CSS 文件与文档中建议的完全相同：

:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

在 html 文件中（表格呈现没有任何问题，但标题仍然不粘）：

<p-table
  [value]="exchanges"
  [paginator]="true"
  [rows]="15"
  [rowHover]="true"
  [rowsPerPageOptions]="[5, 10, 25, 50, 100]"
  [showCurrentPageReport]="false"
  [sortable]="true"
  sortField="adjusted_rank"
  [sortOrder]="1"
  #dt
>

  <ng-template pTemplate="header">
    <tr>
      <th [style]="{ width: '90px' }" pSortableColumn="adjusted_rank">
        <!-- {{ 'TRANSLATE.HOME.TABLE.RANK' | translate}} -->
        Rank
        <p-sortIcon field="adjusted_rank"></p-sortIcon>
      </th>

      <th class="nameExchange" [style]="{ width: '130px' }">
        <div class="container">
          <input
            pInputText
            type="text"
            (input)="dt.filter($event.target.value, 'name', 'startsWith')"
            placeholder="search by name"
            class="ui-column-filter"
          />
        </div>
      </th>
      <th class="hideAbove640">
        <p-dropdown
          ngDefaultControl
          [options]="optionsDropDown"
          (onChange)="selection($event, dd)"
          [(ngModel)]="selected"
          name="selected"
          #dd
          [style]="{ width: '100%', 'min-width': '100%' }"
        ></p-dropdown>
      </th>
      <th class="hideBelow768" [style]="{ width: '100px' }">
        Vol. 24h $
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE' | translate }} -->
      </th>
      <th
        class="hideBelow640"
        [style]="{ width: '140px' }"
        pSortableColumn="currencies"
      >
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE_EUR' | translate }} -->
        Currencies
        <p-sortIcon field="currencies"></p-sortIcon>
      </th>
      <th
        class="hideBelow640"
        [style]="{ width: '140px' }"
        pSortableColumn="markets"
      >
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE_EUR' | translate }} -->
        Markets
        <p-sortIcon field="markets"></p-sortIcon>
      </th>
      <th class="hideBelow1200">
        Description
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE' | translate }} -->
      </th>

      <th class="hideBelow768" [style]="{ width: '160px' }">
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE_BTC' | translate }} -->
        Website
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-exchange>
    <tr>
      <td [style]="{ width: '80px' }">
        {{ exchange.adjusted_rank }}
      </td>
      <td>
        <img
          src="assets/imgs/exchanges/{{ exchange.name | lowercase }}.png"
          alt="{{ exchange.name | lowercase }}"
        />
        {{ exchange.name }}
      </td>
      <td class="hideAbove640">
        <span *ngIf="selectedName === 'Vol. 24h'">
          {{ exchange.quotes.USD.adjusted_volume_24h | formatCurrency }}
        </span>
        <span *ngIf="selectedName === 'Currencies'">
          {{ exchange.currencies }}
        </span>
        <span *ngIf="selectedName === 'Markets'">
          {{ exchange.markets }}
        </span>
        <span *ngIf="selectedName === 'Websites'">
          <li (click)="onNavigate($event)">
            {{ exchange.links.website[0] | formatUrl }}
          </li>
        </span>
      </td>
      <td class="hideBelow768">
        {{ exchange.quotes.USD.adjusted_volume_24h | formatCurrency }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow640">
        {{ exchange.currencies }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow640">
        {{ exchange.markets }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow1200">
        {{ exchange.description }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow768">
        <li (click)="onNavigate($event)">
          {{ exchange.links.website[0] | formatUrl }}
        </li>
      </td>
    </tr>
  </ng-template>
</p-table>

有人知道可能是什么问题吗？它应该非常简单。

提前致谢！

干杯，马塞洛

4

0 回答 0