css table中的奇偶行

在CSS中，表格经常用来展示数据，为了让表格更美观和易读，我们可以使用伪类选择器来为表格中的奇偶行设置不同的样式。现在，我们就来了解一下如何使用伪类选择器来为表格设置奇偶行样式。

table {
  border-collapse: collapse;
  width: 100%;
}

th,td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

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

上面的代码片段展示了如何为偶数行（tr:nth-child(even)）设置背景颜色。也可以为奇数行设置样式，只需要使用tr:nth-child(odd)选择器即可。

当然，你也可以用其他样式代替背景颜色。比如，为偶数行添加边框样式：

tr:nth-child(even) {
  border: 1px solid #ccc;
}

这种样式可以让表格更加醒目，易于阅读。

总之，使用伪类选择器为表格设置奇偶行样式是一种简单易用的技巧，可以让你在设计表格时更加灵活和自由。