如何调整PrimeNG表格列宽？已尝试内联样式与CSS覆盖

针对PrimeNG表格列宽过大的问题，除了你尝试过的内联样式、覆盖CSS，还有以下几种精准的解决方式：

1. 给表头单元格直接指定宽度 #

在<th>标签中添加style属性，结合white-space: nowrap避免内容换行，确保宽度设置生效：

<ng-template pTemplate="header">
  <tr>
    <th pSortableColumn="InvoiceId" style="width: 80px; white-space: nowrap;">
      ID 
      <p-sortIcon field="InvoiceId"></p-sortIcon>
    </th>
    <th pSortableColumn="invoiceno" style="width: 120px; white-space: nowrap;">
      Invoice Number 
      <p-sortIcon field="invoiceno"></p-sortIcon>
    </th>
    <th pSortableColumn="FullName" style="width: 150px;">
      Name 
      <p-sortIcon field="FullName"></p-sortIcon>
    </th>
  </tr>
</ng-template>

2. 通过动态列配置定义宽度 #

如果使用动态列的方式，可在组件的列定义中直接指定样式：

// 组件内的列配置
columns = [
  { field: 'InvoiceId', header: 'ID', style: { width: '80px', whiteSpace: 'nowrap' } },
  { field: 'invoiceno', header: 'Invoice Number', style: { width: '120px', whiteSpace: 'nowrap' } },
  { field: 'FullName', header: 'Name', style: { width: '150px' } }
];

模板中绑定配置：

<p-table [columns]="columns" [value]="invoiceData">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" pSortableColumn="{{col.field}}" [style]="col.style">
        {{col.header}}
        <p-sortIcon field="{{col.field}}"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
</p-table>

3. 提升CSS选择器优先级解决覆盖失效问题 #

如果之前覆盖CSS没生效，大概率是优先级不足，可使用更具体的选择器：

/* 给表格添加自定义类名invoice-table后，精准定位表头 */
.invoice-table th.p-sortable-column {
  width: 80px;
  white-space: nowrap;
}

/* 针对特定列使用:nth-child选择器 */
.invoice-table tr th:nth-child(1) {
  width: 80px;
}
.invoice-table tr th:nth-child(2) {
  width: 120px;
}
.invoice-table tr th:nth-child(3) {
  width: 150px;
}

注：非必要不要用!important，避免引发样式冲突

4. 开启表格滚动模式固定宽度 #

若表格内容较多，开启滚动模式后列宽设置会更稳定：

<p-table [value]="invoiceData" scrollable="true" scrollWidth="100%">
  <!-- 表头与内容模板 -->
</p-table>

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