angular - 角 PrimeNG || 无法自动调整表格水平和垂直的列宽

Question

我使用 PrimeNG 创建了水平和垂直可滚动表的 p 表。它包含更多的行和列。

在这里，我面临着无法自动调整列宽而不是硬编码宽度的挑战。

<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
  </colgroup>
</ng-template>

下面是代码。

<p-table [columns]="th" [value]="tbody" [rows]="100" [paginator]="true" 
[totalRecords]="resultCount" 
  [lazy]="true" (onLazyLoad)="pagination($event)"
[pageLinks]="3" [rowsPerPageOptions]="[100]" scrollable="true" scrollHeight="500px">
<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
  </colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      <div class="table-header">
          {{col.field}}
      </div>
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>

在这里，所有列都是动态的，并且大多数时候有超过 100 种不同类型的列名。例如：列名称如

此外，我们需要包装包含较少文本的列，例如：ID 列

我需要通过垂直和水平滚动来实现这一点。你能帮我解决这个问题吗？

感谢你的帮助！！！

Answer 1

这将创建具有宽度的表格列200px。

<colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
</colgroup>

这将创建宽度均匀分布的表格列。

<colgroup>
    <col *ngFor="let col of columns">
</colgroup>

完整的代码可在stackblitz中找到。