如何设置特定的 PrimeNG 表列最大宽度？

Question

我有这个 p 表：

<p-table id="dg" #dg [value]="dossiers" [columns]="filteredColumns" *ngIf="columns" [hidden]="showConfig"
    [reorderableColumns]="true" [style.height.px]="listHeight"  [scrollable]="true" [scrollHeight]="scrollH+'px'"
    (onColReorder)="onColReorder($event)">
    <ng-template pTemplate="header">
      <tr>
        <th *ngFor="let column of filteredColumns" [style.width.px]="column.width" pReorderableColumn>
          <span *ngIf="column.title!='Logo' && column.title!='Lavorazione Attiva'">{{column.title}}</span>
          <span *ngIf="column.title=='Logo' || column.title=='Lavorazione Attiva'">&nbsp;</span>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-dossier let-columns="columns">
      <tr [ngClass]="showAlert?rowClass(dossier):''">
        <td *ngFor="let col of filteredColumns" [ngClass]="col.styleClass" [style.width.px]="col.width">
          <img *ngIf="col.field=='logo'" [src]="'assets/img/makes/'+dossier.veicoloCodMar+'.jpg'" width="34"
            height="34">
          <clr-icon shape="play" class="is-solid play"
            *ngIf="col.field == 'lavorazioneAttiva' && dossier.lavorazioneAttiva"></clr-icon>
          <span *ngIf="col.field == 'tipo'">
            <img [src]="dossier.icon" *ngIf="dossier.icon" class="type-icon">
          </span>
          <span *ngIf="col.field != 'lavorazioneAttiva'">{{dossier[col.field]}}</span>
          <div class="progress" *ngIf="col.field=='avanzamento' && dossier.limite"
            [ngClass]="dossier.consuntivoTotaleOre >= dossier.limite ? 'danger' : 'success'">
            <progress [max]="dossier.limite" [value]="dossier.consuntivoTotaleOre"
              data-displayval="0%"></progress>
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>

现在列自动适应屏幕，但我希望第 2 列和第 5 列的最大宽度为 100 像素。 有办法吗？

Answer 1

你可以试试这个

<p-table
#dt
[value]="dossiers"
[responsive]="true"
[paginator]="true"
[rows]="10">
<ng-template pTemplate="header">
    <tr>
        <th>Column1</th>
        <th style="width: 100px">Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th style="width: 100px">Column5</th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-dossier>
    <tr>
        <td style="word-break: break-word">
            <span class="p-column-title">Column1: </span>
            {{dossier.column1}}
        </td>
        <td style="word-break: break-word">
            <span class="p-column-title">Column2: </span>
            {{dossier.column2}}
        </td>
        <td style="word-break: break-word">
            <span class="p-column-title">Column3: </span>
            {{dossier.column3}}
        </td>
        <td style="word-break: break-word">
            <span class="p-column-title">Column4: </span>
            {{dossier.column4}}
        </td>
        <td style="word-break: break-word">
            <span class="p-column-title">Column5: </span>
            {{dossier.column5}}
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="emptymessage">
    <tr>
        <td colspan="5">
            Empty message.
        </td>
    </tr>
</ng-template>
</p-table>