使用 CSS 替换 table 行颜色,单个单元格的颜色不是偶数行
Alternate table row color using CSS, individual cells get colored not the even rows
不知何故我无法弄清楚以下内容:Alternate table row color using CSS?
如果我使用上述主题中建议的代码,偶数单元格会变色(第一个、第三个和第五个单元格。一行中总共有 5 个单元格)。我用 'even' 还是 'odd'.
都没关系
td:nth-child(odd)
{
background: #f5f6fa;
}
如果使用下面的代码,所有的行都会变色。:
tr:nth-child(odd)
{
background: #f5f6fa;
}
@svdh 您在 body 和 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>
Fiddle 这里..
https://jsfiddle.net/fo7Ldfqs/
更新:
如果您有多个表格并且您正尝试为每个其他表格着色,那么只需使用:
table:nth-child(odd){background:#ff0000;}
Fiddle 这里.. https://jsfiddle.net/4641ph6u/
不知何故我无法弄清楚以下内容:Alternate table row color using CSS?
如果我使用上述主题中建议的代码,偶数单元格会变色(第一个、第三个和第五个单元格。一行中总共有 5 个单元格)。我用 'even' 还是 'odd'.
都没关系td:nth-child(odd)
{
background: #f5f6fa;
}
如果使用下面的代码,所有的行都会变色。:
tr:nth-child(odd)
{
background: #f5f6fa;
}
@svdh 您在 body 和 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>
Fiddle 这里.. https://jsfiddle.net/fo7Ldfqs/
更新:
如果您有多个表格并且您正尝试为每个其他表格着色,那么只需使用:
table:nth-child(odd){background:#ff0000;}
Fiddle 这里.. https://jsfiddle.net/4641ph6u/