html - 如何使 PrimeNG 表格列自动适应？

Question

我想让我的 PrimeNG 表格列自动适应和调整大小。我怎样才能做到这一点？

Answer 1

您需要使用 2 个属性 [resizableColumns]="true"[autoLayout]="true"在 <p-table> 中定义如下标签

<p-table [resizableColumns]="true" [autoLayout]="true">

为什么会这样？如果您检查它，primeng 默认情况下会从 primeng.min.css 文件中添加以下代码

.ui-table table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

您需要更改表格布局属性，为此您需要使用 [autoLayout]="true"。还有另一种方法，您可以使用 :host 覆盖它，但我不推荐它，因为 autoLayout 已经可以使用了。

对于调整大小，您需要在标签中使用[resizableColumns]="true"

对于滚动，你需要在标签中使用[scrollable]="true"scrollHeight="300px"