html - 将文本颜色应用于 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 添加类的情况下做到这一点？

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

Answer 1

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 元素，也不能按照您尝试使用它的方式使用。

不过，正如其他人所指出的，另一种通常*足以设置第 n 表列样式的策略是使用 :nth-child。 (或 :first-child 或 :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>

*(仅“通常”，因为如果您尝试设置在某些 td 上使用 colspan 属性的表的样式以使其跨越多个列，那么这将不起作用.)