CODEWITHSUNDEEP
htmlcss
user2423959
user2423959

Reputation: 834

match any column width and set

I have the below HTML table row set:

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

I apply CSS to them as follows:

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

This is working fine as I did it in an excel by using the concat function for all the widths from 1-100. But I've been getting some column widths like this:

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

Here I want to know if there is a dynamic way of setting the css width? This is because I am not sure how many different types of col widths are there and there are approximately 290 tables that I need to create. Please let me know if there is a way for dynamically creating css.

Upvotes: 0

Views: 97

Answers (1)

Jeroen
Jeroen

Reputation: 63729

First up, seems to me that the col element spec says it has no content and can not have a width itself. The only purpose seems to be to "define common semantics" on cells. If you want to set a width on columns in a table you'll have to do it through the (header) cells.

To continue with the actual question:

I want to know if there is a dynamic way of setting the css width?

This can be done, but only for elements that can actually have a width.

Check out the W3 Selectors page. One way to fulfill your requirement is as follows:

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

This selects all elements with a class attribute value that contains the string "colwidth-75". See this fiddle for a demo.

There's no real reliable way AFAIK to dynamically set the value of width based on the class name, or anything similar. Some similar/related techniques that may shed some light on this for you are LESS, SASS, and the new CSS-Variables module (draft phase).

You can also consider setting these CSS properties using client or server side script, but if that's possible will probably depend on your use case.

Upvotes: 1

Related Questions