匹配任何列宽和设置

时间:2014-01-13 10:15:03

标签: html5 css3

我有以下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中使用concat函数对1-100的所有宽度进行了处理。但是我得到了一些这样的列宽:

<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宽度的方法?这是因为我不确定有多少种不同类型的col宽度,我需要创建大约290个表。如果有动态创建css的方法,请告诉我。

1 个答案:

答案 0 :(得分:1)

首先,在我看来,col element spec表示它没有内容,并且本身不能有宽度。唯一目的seems to be在单元格上“定义常见语义”。如果要在表格中的列上设置宽度,则必须通过(标题)单元格进行设置。

继续提出实际问题:

  

我想知道是否有动态设置css宽度的方法?

这可以做到,但仅限于实际可以有宽度的元素。

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

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

这将选择具有包含字符串“colwidth-75”的类属性值的所有元素。有关演示,请参阅this fiddle

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

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