p-table 的粘性标题在 Primeng 中不能与 [scrollable] = true 一起使用。？

Question

我正在尝试在 PrimeNg 的 p 表中同时实现 [scrollable]="true" 和粘贴标题。但是如果我不使用可滚动的，粘性标题可以正常工作。如果我同时实现两者，则可滚动可以正常工作，但粘性标题不起作用。

我使用了来自 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。

Answer 1

可滚动表中的结构不同。所以你应该给这个祖先元素 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

Answer 2

我也遇到了这个问题，在深入研究了它的原因之后，我最终打开了一个问题，我对此问题发表了看法，也许他们最终会对可滚动的工作方式做出一些改变https://github.com/primefaces/primeng/issues/11099