0

我是新来修改表中的列组并尝试学习如何标记 css 以使特色列组中的 TH 具有特定的背景颜色，以及该列组内的 TD。我唯一的问题是，我不知道如何设置 CSS 以仅反映这些部分。

我制作了一个示例表，位于：http: //jsbin.com/ocezon/1/edit

如果我没有正确表达这一点，请告诉我，我将尝试进一步解释。我已经标记了我希望能够使用列组分配的#table-5 #featured 属性修改的 TH 和 TD。

我试过类似的代码，#table-5 #featured TH { background: #000; }但没有奏效。

编辑：我发现这可能是不可能的（在尝试了很多方法之后，我也无法让它工作）......所以我决定给 One Trick Pony 的答案，因为它提出了一种可行的方法；不过我稍微修改了这个方法，方便以后修改：http: //jsbin.com/icasom/1/edit

4

2 回答 2

1

不使用colgroups，您可以设置每行的第三个孩子的样式：

#table-5 th:nth-child(3){ 
  background: blue;
}

#table-5 tr td:nth-child(3){
  background: #C0000E;
}

http://jsbin.com/ocezon/3

我对此进行了修改，以便更轻松地处理多个表，并使将来的修改更容易：http: //jsbin.com/icasom/1/edit

于 2013-07-04T23:24:31.527 回答
0

你的表有一个奇怪的 HTML 结构， colgroup 和 th 甚至没有包含在 tr 中：

<table id="table-5">
 <colgroup> 
   <col class="row" />
  <col class="basic"/>
  <col class="premium" id="featured"/>
  <col class="enterprise"/>
</colgroup>
  <thead>
    <tr>
        <th>row</th>
        <th>basic</th>
        <th>premium (modify this TH)</th>
        <th>enterprise</th>
    </tr>
  </thead>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
</table>

你可以添加一些 rgba 颜色来加深你的背景颜色： http : //jsbin.com/ocezon/9/ http://jsbin.com/ocezon/9/edit

于 2013-07-04T23:58:24.353 回答