如何用纯CSS实现表格每三行一组的斑马纹样式？-css教程-PHP中文网

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

聖光之護

发布： 2025-03-14 08:14:21

原创

205人浏览过

如何用纯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结构：

<table class="table">
  <thead>
    <tr><th>COL 1</th><th>COL 2</th></tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>1</td></tr>
    <tr><td>A</td><td>2</td></tr>
    <tr><td>A</td><td>3</td></tr>
    <tr><td>B</td><td>1</td></tr>
    <tr><td>B</td><td>2</td></tr>
    <tr><td>B</td><td>3</td></tr>
  </tbody>
</table>

登录后复制

即可实现无需JavaScript的每三行一组斑马纹表格样式，完美满足App打包需求。

以上就是如何用纯CSS实现表格每三行一组的斑马纹样式？的详细内容，更多请关注php中文网其它相关文章！