当前位置：首页 > 文章列表 > 文章 > 前端 > 纯CSS实现表格三行一组斑马纹效果攻略

纯CSS实现表格三行一组斑马纹效果攻略

2025-03-17 16:30:08 0浏览收藏

本文将介绍如何使用纯CSS代码，为表格实现每三行一组的斑马纹效果，彻底摆脱JavaScript依赖。通过巧妙运用CSS的`nth-child`选择器，您可以轻松创建具有三种不同背景色的表格行，即使在App打包等JavaScript受限环境下也能完美呈现。此方法不仅提升表格可读性，更有效解决App开发中JavaScript兼容性问题，是提高开发效率的实用技巧。

如何用纯CSS实现表格每三行一组的斑马纹样式？

纯CSS打造表格三行一组斑马纹效果，告别JavaScript依赖！

许多应用场景需要为表格添加样式以提升可读性，例如常见的斑马纹。本文将详细讲解如何仅使用CSS代码，实现表格每三行一个背景色的效果。此方法尤其适用于打包成App的场景，无需依赖JavaScript等浏览器环境相关的代码。

目标：每三行一个不同的背景色，纯CSS实现，不依赖JavaScript。这在App打包时非常重要，因为App环境可能限制JavaScript的运行或访问浏览器API。

解决方案的核心是CSS的nth-child选择器。nth-child选择器允许我们根据元素在父元素中的位置来选择元素。为了实现每三行不同的背景色，我们需要巧妙地运用这个选择器。

以下CSS代码实现了每三行一个斑马纹的效果：

.table {
    border-collapse: collapse;
}

.table td {
    border: 1px solid #ddd;
}

.table tr {
    background-color: #f9f9f9; /* 默认背景色 */
}

.table tr:nth-child(3n+1),
.table tr:nth-child(3n+2),
.table tr:nth-child(3n+3) {
    background-color: #fff; /* 白色背景 */
}

.table tr:nth-child(6n+4),
.table tr:nth-child(6n+5),
.table tr:nth-child(6n+6) {
    background-color: #ccc; /* 灰色背景 */
}

这段代码首先设置了表格的基本样式，包括单元格边框和默认背景色。关键在于nth-child选择器：3n+1, 3n+2, 3n+3 选择每三行，并设置白色背景；6n+4, 6n+5, 6n+6 选择接下来的三行，设置灰色背景，以此循环实现三行一组的斑马纹效果。请注意，此代码假设表格包含表头。如果您的表格不包含表头，需要调整nth-child选择器的表达式。

配合以下HTML结构：