html - 重置 HTML 表格中的奇数/偶数序列

Question

我担心答案是否定的，但只是想尝试确认一下。

我将表格的每隔一行设置为灰色背景。

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

这很好用，但表格中也有嵌入的标题行。我希望奇数/偶数模式在每个标题行之后重置并重新开始。

我真正想要的是一种可以分配给标题行的样式，以指示行号应从下一行的 1 重新开始。

是否有任何 CSS 样式来指定奇数/偶数行跟踪应以这种方式重置？

注意:我知道我可以求助于 jQuery 或向表格中的行添加自定义类。我只是希望有一个纯 CSS 的解决方案。

编辑:

有些人要求我应该如何布置表格。所以我会在这里做。我不明白这有什么帮助，因为表格非常基本，而且我认为很明显所有行都是彼此的 sibling 。

<table>
    <tr class="SectionHeader">
        <th>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>

Answer 1

在 CSS 中最接近动态值的是计数器，但计数器不能与选择器一起使用。除了动态伪类之外，选择器大部分是静态的。您不能使用 CSS 设置会影响选择器如何匹配元素的任意值。

正如评论中所建议的，您的表结构最好使用多个 tbody 元素表示，每个部分一个。这还允许您现有的:nth-child() 选择器匹配正确的行元素:

<table>
  <tbody>
    <tr class="SectionHeader">
      <th scope="rowgroup">
    <tr>
      <td>
  <tbody>
    <tr class="SectionHeader">
      <th scope="rowgroup">
    <tr>
      <td>
    <tr>
      <td>
  <tbody>
    <tr class="SectionHeader">
      <th scope="rowgroup">
    <tr>
      <td>
    <tr>
      <td>
</table>

• 省略结束标签以保持整洁；仅供引用，这是完全有效的 HTML
• 我保留了原始标记中的“SectionHeader”类名，但请注意，每个标题单元格上的 scope="rowgroup" 属性提供了类名不具备的适当语义