如何解决Primeng 10.0.3表中的粘性标头不适用于Angular 10.1.5
滚动时,我试图使primng表的表头固定(在顶部粘)。我完全按照primeng文档站点上的教程进行操作。 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>
有人知道这可能是什么问题吗?它应该很简单。
谢谢!
干杯, 马塞洛
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。