如何用CSS实现表格独立区块的斑马纹隔行变色？

需求概述 #

需要为包含多个独立区块的表格添加斑马纹隔行变色效果，要求每个区块内的斑马纹独立重置计数，而非整个表格连续变色——即每个黑色表头（区块标题）后的行从白色开始，按白-灰-白-灰的规律循环。目前该效果可通过JavaScript实现，现寻求纯CSS解决方案。

尝试过的无效CSS方案 #

方案1：排除标题行的nth-child选择器 #

tbody tr:not(.section-heading):nth-child(odd) th,
tbody tr:not(.section-heading):nth-child(odd) td {
    background: #f2f2f2;
}

问题：nth-child是基于<tbody>内所有子元素的位置计数，区块标题行(.section-heading)会占用计数位置，导致后续数据行的斑马纹无法在新区块开头重置。

方案2：使用:nth-child(of ...)筛选目标行 #

tbody tr:nth-child(even of :not(.section-heading)) {
    background: #f2f2f2;
}

问题：该语法的浏览器支持度有限，且实际无法实现区块内的独立计数逻辑，斑马纹仍会跨区块连续。

优化后的纯CSS可行方案 #

将表格的每个独立区块用单独的<tbody>元素划分，利用<tbody>的独立性实现区块内行计数重置：

HTML结构调整 #

把每个区块（包含标题行和对应数据行）放在单独的<tbody>中，示例结构如下：

<table>
  <!-- 第一个区块 -->
  <tbody>
    <tr class="section-heading"><th>区块标题1</th></tr>
    <tr><td>数据行1</td></tr>
    <tr><td>数据行2</td></tr>
    <tr><td>数据行3</td></tr>
  </tbody>
  <!-- 第二个区块 -->
  <tbody>
    <tr class="section-heading"><th>区块标题2</th></tr>
    <tr><td>数据行1</td></tr>
    <tr><td>数据行2</td></tr>
  </tbody>
</table>

对应的CSS代码 #

/* 区块标题样式 */
.section-heading {
  background: #000;
  color: #fff;
}
/* 每个tbody内的斑马纹，独立计数 */
tbody tr:nth-child(even):not(.section-heading) {
  background: #f2f2f2;
}

每个<tbody>作为独立的区块容器，内部的nth-child计数从1开始，因此新区块的数据行始终从白色（奇数行）开始，按白-灰循环，完美实现需求。

内容的提问来源于stack exchange，提问作者magenta placenta