避免使用 <colgroup> / <col> HTML 标记来更改 <thead> 和 <tfoot> 行？

Question

有没有办法限制/约束<colgroup>/<col> HTML 标签中定义的样式的“操作”字段。

给定下表：

<table>
    <colgroup>
        <col align="center" />
        <col align="center" style="background-color: lightgrey;" />
        <col align="center" />
    </colgroup>
    <thead>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.a</td>
            <td>1.b</td>
            <td>1.c</td>
        </tr>
        <tr>
            <td>2.a</td>
            <td>2.b</td>
            <td>2.c</td>
        </tr>
    </tbody>
</table>

我希望background-color: lightgrey; 不应用于“B 列”单元格（thead 中的第二个th）。

Answer 1

您始终可以特别为该单元格应用样式，或为您的标题行设置整个 <tr> 的样式。

http://jsfiddle.net/QQ7LJ/

 <tr style="background-color:white;">
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
 </tr>

简而言之：不，没有办法“限制”css，它将匹配每个可用的目标，并且您的 <col> 样式将匹配整个列。为了获得不同的样式，您需要以某种方式覆盖它，最简单的方法是显式设置与一般样式不匹配的样式。

编辑，您也可以在样式表块中执行此操作，方法是使用 CSS3 选择器 :nth-of-type 并将选择器范围限定为 <tbody> 元素。

http://jsfiddle.net/QQ7LJ/1/

tbody td:nth-of-type(2) {
 background-color: lightgrey;   
}​

以及对 HTML 的更改（其他一切都相同）

<colgroup>
    <col align="center" />
    <col align="center"/>
    <col align="center" />
</colgroup>