PrimeNG开启scrollable的p-table设置列宽无效问题解决方案咨询

PrimeNG的p-table开启[scrollable]="true"后会将表头、表体拆分为独立的flex布局容器，原生table的width和autoLayout属性都会失效，针对这个问题有以下可用解决方案：

• 方案1：使用flex弹性属性设置列宽
  flex布局下优先识别flex系列属性，直接给列配置flex规则，同时给表头<th>和单元格<td>绑定相同的样式即可生效。
  示例代码：
  columns配置：

columns = [
  { field: 'id', header: 'ID', flex: '1 0 10%' }, // 放大比例1 缩小比例0 基础宽度10%
  { field: 'name', header: '名称', flex: '1 0 10%' },
  { field: 'desc', header: '描述', flex: '1 0 80%' }
]

模板部分：

<th
  *ngFor="let col of columns"
  pSortableColumn="{{ col.field }}"
  pReorderableColumn
  pResizableColumn
  [ngStyle]="{'flex': col.flex}"
>
<!-- 单元格部分也要加相同绑定 -->
<td *ngFor="let col of columns" [ngStyle]="{'flex': col.flex}">

• 方案2：使用colgroup统一指定列宽（兼容性最优）
  通过p-table的colgroup插槽指定每列宽度，同时给p-table添加table-layout: fixed配置，即可让百分比宽度生效，还能避免表头表体宽度错位。
  示例代码：

<p-table
  *ngIf="!loading"
  [value]="data"
  [resizableColumns]="true"
  [reorderableColumns]="true"
  [columns]="columns"
  [scrollable]="true"
  scrollHeight="75vh"
  [tableStyle]="{'table-layout': 'fixed'}"
>
  <!-- 新增colgroup插槽 -->
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" [style.width]="col.width">
    </colgroup>
  </ng-template>
  <!-- 其他表头、表体代码保持不变 -->
</p-table>

注意：如果同时开启列拖拽调整功能，以上两种方案都可以和[resizableColumns]="true"兼容，无需额外配置。

内容的提问来源于stack exchange，提问作者Patrick