将文本颜色应用于 HTML 列答案

【问题标题】：Apply text color to HTML column将文本颜色应用于 HTML 列
【发布时间】：2018-12-29 13:59:21
【问题描述】：

<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 添加类的情况下做到这一点？

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

【问题讨论】：

bg color 是关于可以应用的单一规则。它不会直接应用于单元格，而是位于绘制列的区域的表格背景顶部的后面。将 bg 添加到 tr 或 td/th 将隐藏它而不是替换它。您可以使用 rgba() 颜色来查看 col/tr 和单元格背景颜色的混合。渐变或图像可能不会显示在 col bg 上。
@G-Cyr 呃，你的第一句话都差不多，但不是相当正确。还有一些其他的 CSS 属性可以用于 col（即 border、width 和 visibility）。至于背景影响列的区域而不是每个单元格的想法，这是有点真的（实际上，规范甚至有一个diagram显示你描述的内容！）但不完全；单元格之间的间隙将不会获得背景颜色。重叠背景层的概念模型只是确定为单元格提供什么背景的一种方式。

标签： html css html-table col

【解决方案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>

【讨论】：

我还是不明白为什么col方法不起作用
这里的解决方法很好，但是试图解释为什么在col 上设置颜色不起作用是荒谬的。所有表格单元格都在tr 内，如果这是col 上设置的样式无法应用于它们的原因，那也意味着col 上的background-color 不应该也可以工作。
为什么标准说只有背景色有效，而我的实验只显示背景色有效，而这个例子显示前景色有效？我的 Chromium 浏览器不尊重我自己页面中的 color: green，但它在这里。

【解决方案2】：

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

因为只有一小部分样式规则在应用于col 元素时会起作用。

CSS 2.1 规范 says...

17.3 列

表格单元格可能属于两种上下文：行和列。但是，在源文档中，单元格是行的后代，而不是列的后代。不过，单元格的某些方面可能会受到在列上设置属性的影响。

以下属性适用于列和列组元素：
'边框'
仅当表格元素上的“border-collapse”设置为“collapse”时，各种边框属性才适用于列。在这种情况下，在列和列组上设置的边框会输入到冲突解决算法中，该算法会在每个单元格边缘选择边框样式。
'背景'
背景属性设置列中单元格的背景，但前提是单元格和行都具有透明背景。请参阅“表格层和透明度”。
'宽度'
'width' 属性给出了列的最小宽度。
'可见性'
如果一列的“可见性”设置为“折叠”，则该列中的任何单元格都不会被呈现，并且跨越到其他列的单元格会被剪裁。此外，表格的宽度会因列占用的宽度而减小。请参阅下面的“动态效果”。 'visibility' 的其他值无效。

请注意上面列表中没有 '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>

* （仅“通常”，因为如果您尝试使用某些tds 上的colspan 属性来设置表格样式以使它们跨越多个列，那么这将不起作用。）

【讨论】：

当我有rowspan="2" 用于第一列中的单元格时，它也会中断。该样式将应用于下一行第二列中的单元格。这是一种痛苦~

【解决方案3】：

这将选择您提到的整个列：

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

【讨论】：

【解决方案4】：

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


----------

【讨论】：

不仅仅是发布代码，请多解释一下您的答案及其相关性。