可以在可排序的primeng表中更改列的宽度吗？答案

【问题标题】：Can the width of a column be altered in a sortable primeng table?可以在可排序的primeng表中更改列的宽度吗？
【发布时间】：2018-12-03 16:45:19
【问题描述】：

我想减小我在primeng 网格中使用的几列的宽度。但是根据我的理解，我们只能更改使用“p-column”或“th”标签创建的列的宽度。

PFA代码sn-ps如下：HTML：

 <th *ngFor="let col of columns" [pSortableColumn]="col.field"colspan="col.colspan" style="text-align: 
center;">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>

还有 TS：

this.cols = [
                { field: 'first', header:'FIRST'},
                { field: 'second', header: 'SECOND'},
                { field: 'third', header: 'THIRD'},
                { field: 'fourth', header: 'FOURTH'},
                { field: 'fifth', header: 'FIFTH'},
                { field: 'sixth', header: 'SIXTH'}
            ];

我们如何更改可排序primeng表中动态列的宽度？

【问题讨论】：

你没有使用primeng表吧？您是否尝试过使用 simpy 为您的元素分配样式
试过这样做。不工作。例如：primefaces.org/primeng/#/table/sort 您在此页面上看到的网格：我想减小第一列的宽度并增加第四列的宽度。我们怎样才能做到这一点？

标签： angular html-table primeng primeng-datatable primeng-turbotable

【解决方案1】：

更新 TS 文件为，传递与动态列标题名称类似的所需宽度值：

this.cols = [
{field: 'first', header: 'FIRST', width: '20%'},
{field: 'second', header: 'SECOND', width: '30%'},
{field: 'third', header: 'SECOND', width: '50%'}]

使用ngStyle属性绑定width的值：

例如：

<th *ngFor="let col of columns" [pSortableColumn]="col.field" colspan="col.colspan" 
       [ngStyle]="{'width': col.width}">
                {{col.header}}
       <p-sortIcon [field]="col.field"></p-sortIcon>
</th>

【讨论】：

@VaibhavTiwari 提供的解决方案似乎是根据您的需要的正确解决方案。谢谢你，这对我也有帮助。

【解决方案2】：

您可以通过在 <p-table> 标记中添加 width="100%" 来实现。然后您可以为每个动态列定义宽度百分比。

【讨论】：

通过设置宽度：[style]="{'width':'100%'}" 我能够改变整个表格的宽度。我应该如何传递动态行的宽度？
你想设置列宽还是行宽..？在您的问题中，您正在谈论列，而在这里您提到的是行......！
那是个错误。对于清晰度：this.cols = [ { field: 'first', header:'FIRST',width:'5%'}, { field: 'second', header: 'SECOND',width:'85%'}, {字段：'第三'，标题：'THIRD'，宽度：'10％'}，];我想尝试这样的事情。我的列需要具有不同的宽度，这在 html 表格中很容易实现。知道我们如何实现这一目标吗？
您可以使用ngStyle为列设置动态宽度。
如果此解决方案适合您，那么您能否将其作为批准的解决方案..！所以其他人可以知道这是有效的。

【解决方案3】：

如果您使用下面的样式，请添加 colgroup 以定义列的样式。

`     <p-table ...>
        <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width: 40px;">
        </colgroup>
        </ng-template>
       </p-table>`

【讨论】：

【解决方案4】：

provide style like this 

[ngStyle]="{'width': '100%'}"

for eg
 <th *ngFor="let col of columns" [ngSwitch]="col.name">
        <div *ngIf="col.filterable">
          <div *ngIf="col.datatype == 'string'  || col.datatype == 'float'">
            <input pInputText *ngSwitchCase="col.name" type="text" [ngStyle]="{'width': '100%'}" (keyup.enter)="onFilter($event.target.value, col.dataIndex)" />
          </div>
        </div>
      </th>

【讨论】：