5

<table>
    <colgroup>
        <col style="color: green"/>
        <col style="background-color:green"/>
        <col class="char"/>
    </colgroup>
    <tr>
        <th>
            Decimal
        </th>
        <th>
            Hex
        </th>
        <th>
            Char
        </th>
    </tr>
</table>

I can't figure out for the life of me why Decimal is not in green!

I need the entire column to be in green font, background-color works for some reason.

Is there a way to do this without adding a class to every tr?

I need to be able to apply a different colour to each column.

2
  • bg color is about the single rule that can be applied . It will not be applied directly to the cells but behind on top of table background on the area where the column is drawn. adding a bg to tr or td/th will hide it not replace it . You can play with rgba() colors to see col/tr and cell background-colors mixing. gradient or image might not show on col bg.
    – G-Cyrillus
    Commented Jul 21, 2018 at 14:52
  • @G-Cyr Eh, both your first sentences are almost but not quite right. There are a few other CSS properties that can be used on a col (namely border, width, and visibility). As for the idea that the background affects the area of the column instead of each cell, that's sort of true (indeed, the spec even has a diagram showing what you describe!) but not quite; the gaps between cells will not get the background color. The conceptual model of overlapping background layers is just a way to determine what background to give the cell.
    – Mark Amery
    Commented May 19, 2019 at 18:32

4 Answers 4

4

I can't figure out for the life of me why Decimal is not in green!

Because only a tiny subset of styling rules have any effect when applied to a col element.

The CSS 2.1 spec says...

17.3 Columns

Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns.

The following properties apply to column and column-group elements:

'border'

The various border properties apply to columns only if 'border-collapse' is set to 'collapse' on the table element. In that case, borders set on columns and column groups are input to the conflict resolution algorithm that selects the border styles at every cell edge.

'background'

The background properties set the background for cells in the column, but only if both the cell and row have transparent backgrounds. See "Table layers and transparency."

'width'

The 'width' property gives the minimum width for the column.

'visibility'

If the 'visibility' of a column is set to 'collapse', none of the cells in the column are rendered, and cells that span into other columns are clipped. In addition, the width of the table is diminished by the width the column would have taken up. See "Dynamic effects" below. Other values for 'visibility' have no effect.

Note the absence of 'color' from the list above. It doesn't apply to col elements and can't be used in the way you're trying to use it.

As others have noted, though, an alternative tactic that's usually* sufficient to style your nth table column is to use an :nth-child (or :first-child or :last-child) pseudoclass to target the cells in that column:

th:first-child, td:first-child {
    color: blue;
    background: pink;
}
th:nth-child(2), td:nth-child(2) {
    color: white;
    background: green;
}
th:last-child, td:last-child {
    font-weight: bold;
    background: orange;
}
<table>
    <tr>
        <th>Blue on pink</th>
        <th>White on green</th>
        <th>Bold on orange</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>

* (Only 'usually' because if you're trying to style a table that uses the colspan attribute on some tds to make them span multiple columns, then this won't work.)

1
  • It also breaks when I have rowspan="2" for a cell in the first column. The style is applied to the cell in the 2nd column in the next row. This is a pain~
    – Martin
    Commented Feb 12, 2021 at 17:09
3

th is inside tr, hence its not taking the font color.

Here is my solution, Its Not a perfect solution, but will not have to add individual classes .

th:first-child {
  color: green;
}

th:nth-child(2) {
  color: yellow;
}
<table>
  <colgroup>
    <col style="color: green" />
    <col style="background-color:green" />
    <col class="char" />
  </colgroup>
  <tr>
    <th>
      Decimal
    </th>
    <th>
      Hex
    </th>
    <th>
      Char
    </th>
  </tr>
</table>

3
  • I still don't understand why the col method doesn't work Commented Jul 21, 2018 at 13:21
  • 1
    The workaround here is good, but the attempt at an explanation for why setting the color on the col doesn't work is nonsensical. All table cells are inside a tr, and if that were a reason that styles set on a col couldn't apply to them, it would just as well imply that the background-color on the col shouldn't work either.
    – Mark Amery
    Commented May 10, 2019 at 18:14
  • Why do the standards say only the background color works, and my experiments show only the background color works, and this example shows the foreground color working? My Chromium browser doesn't respect the color: green in my own page, but it does here.
    – Phlip
    Commented Jan 29, 2021 at 22:44
-1

This will select the entire column as you mentioned:

<!DOCTYPE html>
<html>
<head>
    <style>
        tr > th:first-child, td:first-child {
            color: green;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col style="color: green"/>
            <col style="background-color:green"/>
            <col class="char"/>
        </colgroup>
        <tr>
            <th>
                Decimal
            </th>
            <th>
                Hex
            </th>
            <th>
                Char
            </th>
        </tr>
        <tr>
            <td>
                3244.21
            </td>
            <td>
                #8217
            </td>
            <td>
                c
            </td>
        </tr>
    </table>
</body>

-1
    <style>
th:first-of-type{color:red;}
</style>
<table>
  <colgroup>
    <col/>
    <col style="background-color:green" />
    <col class="char" />
  </colgroup>
  <tr>
    <th>
      Decimal
    </th>
    <th>
      Hex
    </th>
    <th>
      Char
    </th>
  </tr>
</table>


----------
1
  • 1
    Rather than just posting code, please explain your answer a bit more and how it's relevant.
    – Ryan Kozak
    Commented Jul 24, 2018 at 0:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.