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种不同的列名称。 对于Ex：列名，例如

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

我需要通过垂直和水平滚动来实现。你能帮我吗？

感谢您的帮助！

Answer 1

这将创建宽度为200px的表列。

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

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

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

完整的代码位于stackblitz中。