I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?
I know I could add a "class" attribute on each <td>, but that seems weak.
Here is a trick I used which actually worked well. In an generic (site wide) css file I put:
.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}
and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.
Then on each table I could define the width with a style such as:
<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">
This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.
So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:
In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns
You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.
I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)
<col style="width: 13em">
sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.
If you really need to use cols tags without react restriction then dangerouslySetInnerHTML will help:
<colgroup dangerouslySetInnerHTML={{
__html: `
<col style="background: red;"/>
<col style="width: 20px;"/>
`
}}/>
Note that while this works this is not the recommended way to work with react.
It is working for me like this with colgroup and col
<colgroup align="center">
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
</colgroup>