根据变量设置 html td 宽度

Question

目前我的 html 中有一个 p-table，它循环遍历类别列表并根据类别的数量创建 colspan：

            <ng-container *ngFor="let category of this.categoryList ">
              <th
                [attr.colspan]="category.columnNumber"
                style="white-space: normal; padding: 0.4;"
              >
                {{ category.name }}
              </th>
            </ng-container>

但是，我正在尝试根据 colspan 制作样式宽度属性。因此，如果 colspan 为 2，则宽度将为 200px。如果colspan是4，就是400px等等。

这可以吗？

Answer 1

使用ngClass.

定义你的类:

w-200: {
  width: 200px;
}

w-400: {
  width: 400px;
}
// etc

然后在您的模板中添加 ngClass 和一个配置对象。

<th [attr.colspan]="category.columnNumber" 
    style="white-space: normal; padding: 0.4;"
    [ngClass]="{w-200: category.columnNumber === 2, 'w-400': category.columnNumber === 4}">
      {{ category.name }}
</th>

根据变量设置 html td 宽度

Set html td width based on variable

html

css

css-tables