使用CSS替代表格行颜色,单个单元格变为彩色而不是偶数行

时间:2015-04-30 15:01:23

标签: html css css-selectors background-color css-tables

不知怎的,我无法弄清楚以下内容:Alternate table row color using CSS?

如果我使用上述主题中建议的代码,偶数单元格会变色(第一个,第三个和第五个。连续共有5个单元格)。如果我使用“甚至'”并不重要。或者'奇怪'。

td:nth-child(odd)
{
    background: #f5f6fa;
}

如果使用以下代码,则所有行都会变色:

tr:nth-child(odd)
  {
        background: #f5f6fa;
  }

1 个答案:

答案 0 :(得分:1)

@svdh您的身体以外的标签和html标签也会在正常的网页中呈现。 HTML的问题在于您要设置大量表而不是多行表。它应该是这样的。

<table>
 <tr>
  <td>One</td>
  <td>One.</td>
 </tr>
 <tr>
  <td>Two</td>
  <td>Two.</td>
 </tr>
 <tr>
  <td>Three</td>
  <td>Three.</td>
 </tr>
</table>

在这里摆弄.. https://jsfiddle.net/fo7Ldfqs/

更新:

如果您有多个表并且您尝试着色其他每个表,那么只需使用:

table:nth-child(odd){background:#ff0000;}

在这里摆弄.. https://jsfiddle.net/4641ph6u/