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

标签 css css-tables

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

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

如果我的措辞不正确,请告诉我,我会尝试进一步解释。我已经标记了 TH 和 TD,我希望能够使用列组分配的#table-5 #featured 属性进行修改。

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


编辑:我发现这可能是不可能的(在尝试了很多方法之后,我也无法让它工作)...所以我决定给 One Trick Pony 一个建议的方法的答案确实有效;但是,我稍微修改了此方法以方便将来修改:http://jsbin.com/icasom/1/edit

最佳答案

在不使用 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

关于css - 样式表 - 如何使用列组修改位于该列中的 TH 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17479121/

相关文章:

CSS:包含图像和文本的列表。作出回应

javascript - 根据值输出更改背景颜色

html - 向表格的中间列添加间距

html - 如何防止 span 中的文本进入兄弟 span 中的内容?

html - CSS 表格上的 100% 高度

javascript - 如何垂直对齐 block

css - 用 h3 样式覆盖链接 CSS

javascript - JQuery/CSS 触发动画

html - Internet Explorer 在使用 CSS 表格时忽略宽度

css - 修复 div Angular 单元格的单元格间距[显示 :table]