Question

我是新手修改表格中的列组并尝试了解如何标记css以使特色列组中的TH成为特定的背景颜色，以及该列组内的TD。我唯一的问题是，我不知道如何设置CSS只反映那些部分。

的示例表

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

我尝试过像#table-5 #featured TH { background: #000; }这样的代码但是没有用。

编辑：我发现这可能是不可能的（并且在尝试了许多方法后，我也无法使其工作）...所以我决定给出一个Trick Pony的答案，建议一种方法工作;但是，我稍微修改了这个方法，以便将来很容易修改：http://jsbin.com/icasom/1/edit

Answer 1

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

#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

Answer 2

你的表有一个奇怪的HTML结构，colgroup，甚至没有包裹在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>

您可以添加somme rgba颜色以使背景颜色变暗： http://jsbin.com/ocezon/9/ http://jsbin.com/ocezon/9/edit

样式表 - 如何使用列组修改位于该列中的TH标记

2 个答案: