基础 CSS 表格条纹

当我们在网站上展示数据时，表格是非常有用和实用的工具。如果表格有很多行或列，它们可能会很难辨认。CSS 表格条纹可以让它们变得更易于阅读和使用。

为什么要使用表格条纹？

当展示数据表格时，无论是简单的列表还是大量的数据，即使是眼力十分棒的用户也可能望而却步。表格条纹可以帮助将表格的数据行与列分开，使其更易于阅读和理解。特别是当用户浏览大量数据时，对于眼睛来说这是至关重要的。

如何添加 CSS 表格条纹？

要添加表格条纹到表格中，我们可以使用 CSS 伪类选择器 :nth-child() 或 :nth-of-type()。我们定义每第二行的背景色来交替着色每一行。下面是示例 CSS 代码：

/* 将表格条纹添加到表格中每间隔2行的行上 */
tr:nth-child(2n) {
  background-color: #f2f2f2;
}

这会给每个偶数行（第 2、第 4、第 6 行等）设置一个浅灰色背景色。你当然可以使用你喜欢的任何颜色。如果你使用其他选择器，则还可以将表格条纹添加到表格中的几列单元格上。

下面是如何使用类选择器添加每了第二列的表格条纹的示例 CSS 代码：

/* 将表格条纹添加到每个偶数列（第 2、第 4、第 6 列等）的单元格上 */
td:nth-child(2n) {
  background-color: #f2f2f2;
}

使用 @media 查询

可以根据浏览器的不同大小和方向来更改表格视图。例如，当您在桌面上查看时，表格可以显示为不带表格条纹的完整表格。但是，当在移动设备上查看时，表格条纹会更清晰地分隔数据行。

为了实现此目的，我们可以使用 @media 查询来更改表格的样式。下面是示例代码：

/* 在手机设备的纵向（竖屏）方向上隐藏表格条纹 */
@media screen and (max-width: 600px) {
  tr:nth-child(2n) {
    background-color: white;
  }
}

这段代码只会在横向分辨率小于 600px 时（即在手机上）显示灰色单元格，并在其他时候显示白色单元格。

小结

CSS 表格条纹可以使数据表格更易于阅读和使用。通过使用 :nth-child() 和 :nth-of-type() 伪元素选择器，我们可以轻松地向表格添加条纹。同时，使用 @media 查询可以在不同的设备上更改表格样式。