我正在尝试同时实现 column resize和 stick header .但是如果我不使用列调整大小,粘性标题就可以正常工作。如果我同时实现两者,则列调整大小有效但粘性标题无效。
我将 primeng 中的以下 css 用于粘性 header 。
: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>
如果我删除 resizbleColumns
和 pResizableColumn
粘性标题工作正常。我怎样才能让它同时起作用。?这是 stackblitz和 Demo
最佳答案
当您将 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;
}
}
已更新! 🚀🚀
在组件装饰器中添加样式是不可重用的,primeng主题的基础推荐创建自定义样式我们可以这样做
style.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>
关于html - 粘性标题不适用于 Primeng 中的可调整大小的列。?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57768227/