Apply text color to HTML column

后端未结

关注

 4  1940

感动是毒

相关标签:

4条回答

梦如初夏

2021-01-20 17:51
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.)
0 讨论(0)
发布评论:

提交评论
- 加载中...

迷失自我

2021-01-20 18:01

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>

0 讨论(0)

长发绾君心

2021-01-20 18:01

    <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>


----------

0 讨论(0)

被撕碎了的回忆

2021-01-20 18:10

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>

0 讨论(0)

热议问题

Apply text color to HTML column

17.3 Columns