HTML table colgroup element not working?

Question

I want different styles on each column of a table. I\'ve read that you could do that by using or , but I had no luck. I

Answer 1

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.

Answer 2

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:

• width
• borders
• background colors
• visibility

Source: https://www.w3.org/TR/CSS21/tables.html#columns

Answer 3

Set your table-layout to auto instead of fixed...

table {table-layout: auto;}

My personal site supports multiple themes and I see these kinds of differences all the time.

Answer 4

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.

Answer 5

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.

Answer 6

You could use css selectors to get similar results without adding extra classes.

As an example if you want to give specific style to a second column you can use:

table>tbody>td:nth-child(2){font-weight: bolder;}