在Primeng中，p表的粘贴标头无法与[scrollable] = true一起使用。

debugcn 发表于 Dev

卡鲁伊·安瓦尔

我正在尝试在PrimeNg的p表中同时实现[scrollable] =“ true”和stick标头。但是，如果我不使用可滚动的标题，则粘性标头效果很好。如果同时实现这两个功能，则scrollable起作用，但粘性标头不起作用。

我使用了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"粘页眉工作正常。我怎样才能使它同时起作用呢？这是堆叠闪电战。

亚亚

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

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

在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>

最低示例越野车版本| 最小示例固定版本

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。