表行和表列的CSS

时间:2015-09-12 作者:Gecko Boy

我有一个简单的表格布局,如下所示:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
以及以下CSS:

table td:nth-child(1),
table tr:nth-child(1) {
  font-weight: bold;
}
第一列以粗体显示,但第一行保持为普通文本。我不想使用标题,因为Wordpress中的TinyMCE会以上述格式自动创建表,所以我宁愿坚持使用标题,而不必更改HTML。

顺便提一下,以下内容确实有效,因此我假设使用“tr:nth child(n)”没有问题

tbody tr:nth-child(odd) {
  background: #eee;
}
非常感谢您的帮助。

2 个回复
SO网友:Gecko Boy

在经历了很多挫折之后,我意识到问题在于,您最终需要指定如何处理cell 在第n行中,正确的代码是:

table td:nth-child(1),
table tr:nth-child(1) td {
  font-weight: bold;
}
将此作为答案,因为有许多源使用标题来设置顶行的样式,但没有规定如果您有一个没有标题的表布局,需要做什么。

SO网友:Tom Berghuis
table:nth-child(1),
table tr:nth-child(1) {
  font-weight: bold;
}