时间戳

首页 > 解决方案 > 如何动态定义表格中列的宽度

html - 如何动态定义表格中列的宽度

问题描述

[Class.width]="header.width" 这不起作用。我怎样才能实现表格每一列的动态设置宽度。

app.component.html

<th class="name-center head-color " *ngFor="let header of tableHeader;let headIndex=index" [class.width]="header.width"
    >{{header.value}}</th>

app.component.ts

this.tableHeader=[{"name":"sno","value":"S.No","width":"5%"},
{"name":"training","value":"Training","width":"35%"},
{"name":"skill","value":"Skill","width":"20%"},
{"name":"applicableProficiency","value":"Applicable proficiency","width":"20%"},
{"name":"trainingAction","value":"Training Action","width":"20%"}];

标签： htmlcssangular

解决方案

您可以使用容器来保留对 tableHeader 项目的引用并相应地设置所需的宽度：

<table width="100%" border=1>
    <tr>
        <ng-container *ngFor="let header of tableHeader;let headIndex=index">
            <th class="name-center head-color " [width]="header.width">{{header.value}}</th>
        </ng-container>
    </tr>

</table>

堆栈闪电战

推荐阅读