在Primeng中，p表的粘滞标题不能与[Scrollable]=TRUE一起工作。？ [英] Sticky header of p-table not working with [scrollable] = true in Primeng.?

问题描述

我正在尝试在PrimeNg的p表中同时实现[Scrollable]=&True&Quot；和Stick Header。但是，如果我不使用可滚动的，则粘滞标题可以很好地工作。如果我同时实现两者，则可滚动工作正常，但粘滞标题不工作。

我使用Primeng中的以下css作为粘性标题。

 :host ::ng-deep .ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 69px;
        box-shadow: 1px 3px 6px 0 rgba(32,33,36,0.10);
    }

    @media screen and (max-width: 64em) {
        :host ::ng-deep .ui-table .ui-table-thead > tr > th {
            top: 99px;
        }
    }

对于可滚动，我使用了以下代码[scrollable]="true"

<p-table [columns]="cols" [value]="cars1" [scrollabe]="true">
...
 <th *ngFor="let col of columns" >

如果我删除[scrollable]="true"粘滞标题，则工作正常。我怎么才能让它同时起作用呢？ 这是stackblitz。

推荐答案

可滚动表格中的结构不同。因此，您应该为该祖先元素指定sticky样式：

:host ::ng-deep .ui-table-scrollable-header{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}

See it live on stackblitz

---

描述问题的最小示例：

下面的sticky头不起作用，因为我们向错误的元素添加了粘滞。要修复它，我们应该将sticky添加到.header：

<div style="height: 1500px; background: #def;">
  <div class="header" style="background: #fed;"><!-- <- instead add sticky to here -->
    <div style="position: sticky;top: 0;">header</div> <!-- <-- not here -->
  </div>
  <div class="body" style="background: blue; height: 1500px;">
    <div>body</div>
  </div>
</div>

minimal example buggy version|minimal example fixed version

这篇关于在Primeng中，p表的粘滞标题不能与[Scrollable]=TRUE一起工作。？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！