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列”单元格（th中的第二个thead）。

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>

简而言之：不，没有办法限制＆＃34; 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>

避免/ HTML标签改变和行？

1 个答案: