我尝试同时实现列大小调整和粘贴标题。但是如果我不使用列大小调整,粘贴标题可以正常工作。如果我同时实现列大小调整和粘贴标题,列大小调整可以正常工作,但是粘贴标题不能正常工作。
我使用了以下来自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>
如果我删除了resizbleColumns
和pResizableColumn
的粘头工作正常。我怎样才能使它工作的两件事。这里是stackblitz和Demo
5条答案
按热度按时间ddarikpa1#
当你设置p-table列为可调整大小时,添加一个类
ui-table-resizable
,这将重置一些css属性,其中一个th
的位置为相对,这样你将失去粘性futuredemo 🔥🔥
已更新!🚀🚀
在组件装饰器中添加样式是不可重用的,创建自定义样式的primeng主题建议的基础,我们可以这样做
demo ⚡⚡
clj7thdc2#
任何仍然感兴趣的人:
对我来说,只需添加以下内容即可
可调整特征增加了“溢出x:auto”添加到表中,这将隐藏条形标题。
aelbi1ox3#
wbgh16ku4#
请使用以下代码:
mo49yndu5#
我有粘性表头工作之前没有调整大小。后添加调整大小,它不坚持了。
我在我的小数据表(p-datatable-sm)上修正了这个问题,我想这个方法也适用于正常大小的数据表和正确的css类。
Angular 版本15.1,原始版本15.2
适合我的解决方案:
说明:
增加:
以及
会覆盖它。