如何在不使用javascript甚至/奇数类生成的情况下在html表上创建斑马条纹?

Vla*_*mir 58 css html-table

我想zebra-stripe一个html表而不使用任何js东西或编写服务器端代码来为表行生成偶数/奇数类.是否有可能使用原始css?

K. *_*ert 124

CSS3选择器可以:

tr:nth-child(even) {
  background-color: red;
}


tr:nth-child(odd) {
  background-color: white;
}
Run Code Online (Sandbox Code Playgroud)

caniuse.com称,现在每个浏览器都支持它.

  • 现代你的意思是除了IE7和8之外的一切 (24认同)
  • 您可能希望将其范围限定为`tbody tr:nth-​​child(even)`因此它仅适用于表体中的行,而不适用于通常使用不同样式的`<thead>`或`<tfoot>`. (9认同)