AngularJS多tbody表格实现斑马纹列表的CSS解决方案

问题根源 #

你原来的CSS失效核心原因是：tbody tr:nth-child()是在每个<tbody>内部单独计数，而非对整个表格的所有<tr>进行连续计数。另外你的表格HTML结构存在合规性问题：

• 有一个<tr>直接放在<table>下、<tbody>之外，不符合HTML规范（表格行必须嵌套在tbody/thead/tfoot中）
• 存在嵌套的<tbody>，这是不允许的，浏览器会自动修正结构，进一步打乱计数逻辑

修复步骤 #

1. 先修正HTML结构（必做） #

先把违规结构调整为合规格式：

• 所有<tr>必须放入<tbody>内，不能直接作为<table>的子元素
• 移除嵌套的<tbody>，确保每个<tbody>都是<table>的直接子元素

修正后的示例结构：

<table>
  <tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
  </tbody>
  <tbody>
    <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
  </tbody>
  <tbody>
    <tr><td>bbbbbbbb</td></tr>
  </tbody>
  <tbody>
    <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
    <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
    <tr><td>bbbbbbbb</td></tr>
  </tbody>
  <tbody>
    <tr><td>bbbbbbbb</td></tr>
  </tbody>
</table>

2. 实现跨tbody的连续斑马纹 #

要让计数横跨所有<tbody>，需要把选择器层级调整为直接在<table>下选中<tr>：

方案1：基础奇偶行交替

如果只需要简单的奇偶斑马纹：

table tr:nth-child(odd) {
  background: #ccc;
}

方案2：匹配你原需求的4行周期

如果要保留你原本4n-1和4n+1的配色逻辑，直接修改选择器层级即可：

table tr:nth-child(4n-1), 
table tr:nth-child(4n+1) {
  background: #ccc;
}

这个选择器会对整个表格内的所有<tr>按连续顺序计数，不受<tbody>分割影响。

补充说明 #

如果因AngularJS分组循环的业务需求必须保留多个<tbody>，只要确保每个<tbody>都是<table>的直接子元素，且所有<tr>都嵌套在<tbody>内部，上述CSS就能正常生效。

内容的提问来源于stack exchange，提问作者Ernandes Dee Pereira