我设置了以下 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宽度的方法?这是因为我不确定有多少种不同类型的 col 宽度,并且我需要创建大约 290 个表。如果有动态创建 css 的方法,请告诉我。
最佳答案
首先,在我看来 col
element spec说它没有内容并且本身不能有宽度。唯一目的seems to be在单元格上“定义通用语义”。如果您想在表格中的列上设置宽度,则必须通过(标题)单元格来完成。
继续实际问题:
I want to know if there is a dynamic way of setting the css width?
这可以做到,但仅限于实际可以有宽度的元素。
查看 W3 Selectors页。满足您的要求的一种方法如下:
[class*="colwidth-75"] { width: 75%; }
这会选择所有具有包含字符串“colwidth-75”的类属性值的元素。参见 this fiddle用于演示。
据我所知,没有真正可靠的方法可以根据类名或类似名称动态设置宽度值。一些类似/相关的技术可能会为您提供一些启发,这些技术是 LESS , SASS , 和新的 CSS-Variables模块(草案阶段)。
您还可以考虑使用客户端或服务器端脚本设置这些 CSS 属性,但如果可能的话,这可能取决于您的用例。
关于html - 匹配任何列宽并设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21088695/