Html p-表格的粘性标题不使用[scrollable]=在启动时为true。？

我试图在priming的p-table中实现[scrollable]=“true”和stick头。但是如果我不使用可滚动的标题，粘性标题就可以了。如果我同时实现这两个功能，scrollable可以工作，但是sticky header不能工作

我使用了以下来自priming的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，我使用了下面的代码，

[scrollable]=“true”

...

如果我删除

[scrollable]=“true”

粘性标题就可以了。我怎样才能使它同时起作用。？

---

以下是可滚动表格的结构。

可滚动表格的结构不同。因此，您应该将

sticky

样式改为该祖先元素：

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

---

描述问题的最小示例：

下面的

sticky

标题不起作用，因为我们将sticky添加到了错误的元素。要解决此问题，我们应该将

粘性

添加到

标题

：

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

标题
身体

|

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