相关文章推荐
潇洒的香瓜  ·  阿杰学python----pymysql ...·  1 月前    · 
豪气的感冒药  ·  MySQL :: MySQL ...·  4 周前    · 
气宇轩昂的香瓜  ·  Copy and transform ...·  4 周前    · 
逆袭的沙滩裤  ·  BottomNavigationView和A ...·  1 年前    · 
爱运动的南瓜  ·  python psycopg2 ...·  1 年前    · 
谦逊的水煮肉  ·  Angular4 ...·  1 年前    · 

primeng p-table column width fit content

primeNG是一个为Angular应用程序开发的UI组件库。p-table是其中的一个组件,表示一个表格。

如果你想让p-table的列宽度按照内容自适应,你可以使用如下方法:

为p-table添加属性[autoLayout]="true"。这会使列宽自动调整以适应表格内容。

为p-table的每个列添加属性[style]="'width: auto'"。这会使每一列的宽度自动调整以适应列内容。

为p-table的每个列添加属性[style]="'min-width: min-content'"。这会使每一列的宽度至少为其内容的最小宽度,并且允许宽度自动调整以适应内容。

为p-table的每个列添加属性[style]="'width: fit-content'"。这会使每一列的宽度至少为其内容的最小宽度,并且只有在有足够的空间的情况下才会扩展。

你可以根据自己的需要来选择最适合的方法。

让我们看一个例子:

<p-table [columns]="cols" [value]="cars" [autoLayout]="true">
  <ng-template pTemplate="header" let-columns>
      <th *ngFor="let col of columns" [style]="'width: fit-content'">
        {{col.header}}
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
      <td *ngFor="let col of columns" [style]="'width: fit-content'">
        {{rowData[col.field]}}
  </ng-template>
</p-table>

这将创

  •