匹配任意列宽并设置

Question

我有下面的HTML表行集：

<col class="colname-c1 colwidth-7"></col>
<col class="colname-c2 colwidth-75"></col>
<col class="colname-c3 colwidth-16"></col>

我将CSS应用于它们如下：

.colwidth-7{colwidth-7%}
.colwidth-75{colwidth-75%}
.colwidth-16{colwidth-16%}

这很好，就像我在excel中对1-100的所有宽度使用concat函数一样。但我得到了一些像这样的列宽：

<col class="colname-c1 colwidth-7.27%"></col>
<col class="colname-c2 colwidth-75.76%"></col>
<col class="colname-c3 colwidth-16.97%"></col>

这里我想知道是否有一种动态的方式来设置css宽度？这是因为我不确定有多少不同类型的列宽度，并且我需要创建大约290个表。请告诉我是否有一种动态创建css的方法。

Answer 1

首先，在我看来，col元素规范说它没有内容，本身也不能有宽度。唯一的目的似乎是在细胞上"定义通用语义"。如果你想设置表中列的宽度，你必须通过(表头)单元格来设置。

继续实际问题：

我想知道是否有一种动态的方式来设置css宽度？

这是可以实现的，但仅适用于实际具有宽度的元素。

查看W3 Selectors页面。满足您要求的一种方法如下：

[class*="colwidth-75"] { width: 75%; }

这将选择具有包含字符串"colwidth-75"的类属性值的所有元素。请看这把小提琴的演示。

AFAIK没有真正可靠的方法来根据类名或类似的东西动态设置宽度值。LESS、SASS和新的CSS变量模块(草案阶段)可能会为您提供一些类似/相关的技术。

您也可以考虑使用客户端或服务器端脚本来设置这些CSS属性，但如果可能的话，这可能取决于您的用例。