table隔行变色css

基础概念

table 隔行变色是指在 HTML 表格中，通过 CSS 技术实现奇数行和偶数行显示不同的背景颜色，以增强表格的可读性和美观性。

类型

纯 CSS 实现：使用 CSS 伪类 :nth-child 来选择奇数行和偶数行。
JavaScript 辅助：通过 JavaScript 动态添加类名来实现隔行变色。

应用场景

数据报表
电商商品列表
财务报表
任何需要展示大量数据的表格

示例代码（纯 CSS 实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Highlighting</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:nth-child(odd) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Mike Johnson</td>
            <td>40</td>
        </tr>
    </table>
</body>
</html>

参考链接

MDN Web Docs: nth-child

常见问题及解决方法

问题：为什么隔行变色没有生效？

原因：

CSS 选择器错误：可能是 :nth-child 选择器使用错误。
CSS 优先级问题：其他 CSS 规则覆盖了隔行变色的样式。
HTML 结构问题：表格结构不正确，导致 CSS 选择器无法正确匹配。

解决方法：

检查 :nth-child 选择器是否正确使用，例如 tr:nth-child(even) 和 tr:nth-child(odd)。
确保隔行变色的 CSS 规则优先级足够高，可以通过增加选择器的特异性或使用 !important。
检查 HTML 表格结构是否正确，确保每一行都是 <tr> 标签。

示例代码（JavaScript 辅助）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Highlighting</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .even {
            background-color: #f2f2f2;
        }
        .odd {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Mike Johnson</td>
            <td>40</td>
        </tr>
    </table>
    <script>
        const table = document.getElementById('myTable');
        const rows = table.getElementsByTagName('tr');
        for (let i = 1; i < rows.length; i++) {
            if (i % 2 === 0) {
                rows[i].classList.add('even');
            } else {
                rows[i].classList.add('odd');
            }
        }
    </script>
</body>
</html>