如何实现表格的单双行条纹样式？

可以通过纯 CSS 方法或框架辅助实现表格的单双行条纹样式。以下内容针对如何应用这些技术进行分点说明，使用清晰结构确保易理解。

1. 纯 CSS 方法: 使用 CSS 伪类选择器来动态设置奇数行和偶数行的背景色。核心选择器是 :nth-child() 或 :nth-of-type(), 适用于任何简单表格。

table {
  width: 100%;          /* 表格宽度占满容器 */
  border-collapse: collapse; /* 重要: 合并边框以避免双线显示问题 */
}
tr:nth-child(odd) {     /* 目标所有奇数行: 设置浅灰色背景 */
  background-color: #f9f9f9;
}
tr:nth-child(even) {    /* 针对偶数行: 可留白或设置不同的颜色 */
  background-color: #ffffff; /* 通常是默认背景色 */
}

• 步骤解析:
  • 定义表格样式, 确保 border-collapse: collapse; 避免边框冲突。
  • 使用 tr:nth-child(odd) 为奇数行添加底色（如 #f9f9f9）。
  • 可选择性地为偶数行设置 tr:nth-child(even)。

注意事项:

• 选择器 :nth-child() 在旧浏览器如 IE8 不被支持。替换方案如 :nth-of-type() 语法类似。
• 在复杂的表格结构中（例如包含表头、表尾）, 建议目标 tbody tr:nth-child(odd) 来限制范围内只针对数据行应用样式。

2. 使用前端框架（如 Bootstrap）: 添加内置类简化实现, 适合快速开发场景。

只需为 table 元素附加 .table-striped 类, 结合 Bootstrap 表格基类:

<table class="table table-striped"> <!-- .table-striped 自动启用条纹样式 -->
  <thead> <!-- 通常表头不会被着色 -->
    <tr><th>标题 1</th><th>标题 2</th></tr>
  </thead>
  <tbody> <!-- 样式仅作用于此区域内的行 -->
    <tr><td>行 1 数据</td><td>示例</td></tr>
    <tr><td>行 2 数据</td><td>示例</td></tr>
  </tbody>
</table>

• 步骤解析:
  • Bootstrap 基于 .table + .table-striped 实现相同机制, 依赖底层类似 CSS: .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }
  • 使用时必须引入 Bootstrap CSS 资源, 确保文件被加载。

优化考虑:

• 兼容性处理: 针对老旧浏览器, 可添加脚本回退如遍历行添加类。
• 增强体验: 结合 .table-hover 类添加悬停变色效果。
• 性能影响: CSS 选择器优于手动类操作, 但大量数据表格建议避免过度伪类以免渲染延迟。