PrimeNG table header 动态添加行时与滚动条未对齐

Question

我在angular中使用了p-table来显示数据，并使用固定高度的滚动条作为"300px"

<p-table [columns]="myCols" [value]="myList" [scrollable]="true" scrollHeight="300px" [responsive]="true">

在这里，我向 table 动态添加行，这会在运行时创建滚动条，那时 header 会错位。

所以它只有 body 上的滚动条。

如果它在页面加载时有滚动条那么它工作正常但是当我们在运行时有滚动条时会出现问题。

这是同一问题的 stackblitz（单击 'clone' 按钮可动态向 table 添加行）

Answer 1

只需添加边距以对齐页眉和正文。

.ui-table-scrollable-header-box {
   margin-right: 17px !important;
}

看到这个example.fore more reference visit this link

Answer 2

我和你有同样的问题，但我使用了[resizableColumns]="true"。当 header 变得不对齐时，我将拖动水平条滚动。不会错位

Answer 3

我已经修复了。

只需要使用传播运算符(...)

需要在克隆事件的末尾添加下一行。

this.cars = [...this.cars];

Answer 4

::ng-deep .p-datatable-scrollable-header-box {
  margin-right: 17px !important;
}

在组件的 scss 文件中添加这些行

PrimeNG table header misaligned with scrollbar when adding rows dynamically