使用 PrimeNG 数据表适当调整行长度？

Question

如何解决我想使用 PrimeNG 数据表适当调整行长度的问题？ 现在我的数据显示如下

我想像这样改变

Answer 1

如果没有更精细的设置，我会建议使用 p-dataTable 上的 resizableColumns、expandableRows 和 expandedRows 选项，将宽度设置为百分比，并使列手动可调 (https://www.primefaces.org/primeng/#/datatable)；例如，像这样的东西：

<p-dataTable [value]="cars" [resizableColumns]="true" [expandableRows]="true" [expandedRows]="expandedItems">
    <p-column field="vin" header="Vin" [resizable]="true" [style]="{'width':'20%'}"></p-column>
    <p-column field="year" header="Year" [resizable]="true" [style]="{'width':'30%'}"></p-column>
    <p-column field="brand" header="Brand" [resizable]="true" [style]="{'width':'15%'}"></p-column>
    <p-column field="color" header="Color" [resizable]="true" [style]="{'width':'35%'}"></p-column>
</p-dataTable>

有关更多详细信息，请参阅此 Whosebug：How to expand row from datatable programmatically

使用 PrimeNG 数据表适当调整行长度？

resize row length proper using PrimeNG Datatable?

datatable

angular2-routing

angular

primeng-datatable

angular4-forms