p-table 的 Sticky header 无法与 Primeng 中的 [scrollable] = true 一起使用。？

Question

我正在尝试在 PrimeNg 的 p-table 中实现 [scrollable]="true" 和 stick header。但是如果我不使用滚动条，sticky header 可以正常工作。如果我同时实现两者，则可滚动可以工作，但粘性 header 不工作。

我使用了来自 primeng 的以下 css 作为粘性 header。

 :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" 粘性 header 工作正常。我怎样才能让它同时起作用。？这是 stackblitz.

Answer 1

可滚动table中的结构不同。所以您应该将 sticky 样式赋予该祖先元素：

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

See it live on stackblitz

描述问题的最小示例：

下面的 sticky header 不起作用，因为我们向错误的元素添加了粘性。要修复它，我们应该将 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

p-table 的 Sticky header 无法与 Primeng 中的 [scrollable] = true 一起使用。？

Sticky header of p-table not working with [scrollable] = true in Primeng.?

html

css

primeng

angular

primeng-datatable