css 在Primeng中,粘性标题不适用于可调整大小的列,

4zcjmb1e  于 2023-03-05  发布在  其他
关注(0)|答案(5)|浏览(116)

我尝试同时实现列大小调整和粘贴标题。但是如果我不使用列大小调整,粘贴标题可以正常工作。如果我同时实现列大小调整和粘贴标题,列大小调整可以正常工作,但是粘贴标题不能正常工作。
我使用了以下来自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;
        }
    }

对于列大小,我使用了以下代码:[resizableColumns]="true"pResizableColumn

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

如果我删除了resizbleColumnspResizableColumn的粘头工作正常。我怎样才能使它工作的两件事。这里是stackblitzDemo

ddarikpa

ddarikpa1#

当你设置p-table列为可调整大小时,添加一个类ui-table-resizable,这将重置一些css属性,其中一个th的位置为相对,这样你将失去粘性future

  • 这应该能解决问题 *
: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;
  }
}

demo 🔥🔥

已更新!🚀🚀

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

  • 样式.scss*
.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;
        }
      }

}
  • 模板 *
<p-table styleClass="sticky-table" [columns]="cols" [value]="cars [resizableColumns]="true">
....
</p-table>

demo ⚡⚡

clj7thdc

clj7thdc2#

任何仍然感兴趣的人:
对我来说,只需添加以下内容即可

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

可调整特征增加了“溢出x:auto”添加到表中,这将隐藏条形标题。

aelbi1ox

aelbi1ox3#

:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        background: blue;
        color: white;
        top: 0px;
        z-index: 1;
      }
      
      :host ::ng-deep .p-datatable-resizable > .p-datatable-wrapper {
        overflow-x: initial !important;
      }
      
      :host ::ng-deep .p-datatable-resizable .ui-resizable-column {
        position: sticky !important;
      }
      
      @media screen and (max-width: 64em) {
        :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
          top: 0px;
        }
      }
wbgh16ku

wbgh16ku4#

请使用以下代码:

<p-table [columns]="cols" [value]="rows" [autoLayout]="true">
mo49yndu

mo49yndu5#

我有粘性表头工作之前没有调整大小。后添加调整大小,它不坚持了。
我在我的小数据表(p-datatable-sm)上修正了这个问题,我想这个方法也适用于正常大小的数据表和正确的css类。
Angular 版本15.1,原始版本15.2
适合我的解决方案:

:host ::ng-deep .p-datatable-sm .p-resizable-column {
    position: sticky !important;
}

说明:

.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column)

增加:

position:relative

以及

:host ::ng-deep .p-datatable-sm .p-resizable-column {
    position: sticky !important;
}

会覆盖它。

相关问题