时间戳

首页 > 解决方案 > 如何使 PrimeNG 表列自动适应？

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

问题描述

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

标签： htmlcssangularprimeng-datatable

解决方案

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

<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"

推荐阅读