粘性标题无法与Primeng中的可调整大小的列一起使用？

Question

我正在尝试实现列大小调整和stick header。但是，如果我不使用列大小调整，则粘性标头可以很好地工作。如果同时实现这两种方法，则列调整大小是有效的，但粘性标头不起作用。

我使用了primeng的以下CSS作为粘性标头。

  :host ::ng-deep .ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 70px;
    }

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

对于colum调整大小，我使用了以下代码[resizableColumns]="true"， pResizableColumn

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

如果我删除resizbleColumns和pResizableColumn粘性标头工作正常。我怎样才能使它同时起作用呢？这是stackblitz和演示

Answer 1

任何仍然可能感兴趣的人：
对我来说，只需添加以下内容就可以了

:host ::ng-deep .p-datatable .p-datatable-wrapper {
    overflow-x: initial;
}

可调整大小的功能将“overflow-x：auto”添加到表中，这会隐藏棒头。

Answer 2

当您将p-table列设置为可调整大小时，请添加一个类，ui-table-resizable这将重置一些css属性的th相对位置之一，因此您将失去粘性

这应该解决问题

:host ::ng-deep .ui-table .ui-table-thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  background: blue;
  color: white;
  top: 0px;
  z-index: 1;
}

:host ::ng-deep .ui-table-resizable > .ui-table-wrapper {
  overflow-x: initial !important;
}

:host ::ng-deep .ui-table-resizable .ui-resizable-column {
  position: sticky !important;
}

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

演示

更新！

在组件装饰器中添加样式是不可重用的，primem主题基础推荐创建自定义样式的建议，我们可以这样做

style.scss

:host ::ng-deep .ui-table .ui-table-thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  background: blue;
  color: white;
  top: 0px;
  z-index: 1;
}

:host ::ng-deep .ui-table-resizable > .ui-table-wrapper {
  overflow-x: initial !important;
}

:host ::ng-deep .ui-table-resizable .ui-resizable-column {
  position: sticky !important;
}

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

模板

.sticky-table {

      &.ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky !important;
        background: blue;
        color: white;
        top: 0px;
        z-index: 1;
      }

     &.ui-table-resizable > .ui-table-wrapper {
        overflow-x: initial !important;
      }

      &.ui-table-resizable .ui-resizable-column {
        position: sticky !important;
      }

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

}

演示??