将文本颜色应用于 HTML 列

Question

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

我这辈子都想不通为什么 Decimal 不是绿色的！

出于某种原因，我需要整个栏都使用绿色字体，背景颜色有效。

有没有办法不在每个 tr 中添加 class 来做到这一点？

我需要能够对每一列应用不同的颜色。

Answer 1

th 在 tr 中，因此它不采用字体颜色。

这是我的解决方案，它不是一个完美的解决方案，但不必添加个人类。

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>

Answer 2

这将 select 您提到的整个专栏：

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

Answer 3

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


----------

Answer 4

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

因为只有一小部分样式规则在应用于 col 元素时会产生任何影响。

CSS 2.1 规范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.

请注意上面的列表中缺少 'color'。它不适用于 col 元素，并且不能按照您尝试使用它的方式使用。

不过，正如其他人所指出的，另一种通常*足以设置第 nth table 列样式的策略是使用 :nth-child (or :first-child or :last-child)以该列中的单元格为目标的伪类：

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>

*（仅限 'usually'，因为如果您尝试设置 table 的样式，该 table 在某些 td 上使用 colspan 属性以使它们跨越多个列, 那么这将不起作用。)

将文本颜色应用于 HTML 列

Apply text color to HTML column

html

css

html-table

col

17.3 Columns