如何在不使用 javascript 和偶数/奇数类生成的情况下在 html 表上创建斑马条纹? [英] How to create zebra stripes on html table without using javascript and even/odd classes generation?

问题描述

我想在不使用任何 js 内容或编写服务器端代码来为表行生成偶数/奇数类的情况下对 html 表进行斑马条纹.是否可以使用原始 css?

I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?

推荐答案

使用 CSS3 选择器是可能的:

It is possible, with CSS3 selectors:

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


tr:nth-child(odd) {
  background-color: white;
}

根据 caniuse.com，现在每个浏览器都支持它.

According to caniuse.com, every browser supports it now.

这篇关于如何在不使用 javascript 和偶数/奇数类生成的情况下在 html 表上创建斑马条纹?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！