在具有子行的表中选择奇数/偶数行答案

【问题标题】：Selecting odd/even rows in table with child rows在具有子行的表中选择奇数/偶数行
【发布时间】：2022-11-17 14:14:17
【问题描述】：

我有一个交替行颜色的表。某些行后面可能跟有一个动态添加的“子行”，它包含一个 TD 标记并跨越所有列。我想保持交替的行颜色，就好像没有子行一样。在我的示例中，您可以看到最后 3 行（3、4、5）由于子行的原因都具有相同的颜色。

我希望我能做到这一点，但它没有达到预期的效果。

tr:not(.childrow):nth-child(odd) { }

table {
    border-collapse: collapse;
    width: 400px;
}

tr:nth-child(odd) {
    background: #ccc
}
.childrow td {
    background: #333;
    color: white;
    padding: 10px
}

<table border="1">
  <tbody>
    <tr>
        <td>1.1</td><td>1.2</td><td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td><td>2.2</td><td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td><td>3.2</td><td>3.3</td>
    </tr>
    <tr class="childrow">
        <td colspan="3">this is a child row</td>
    </tr>
    <tr>
        <td>4.1</td><td>4.2</td><td>4.3</td>
    </tr>
    <tr class="childrow">
        <td colspan="3">this is a child row</td>
    </tr>
    <tr>
        <td>5.1</td><td>5.2</td><td>5.3</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

我认为您无法仅使用 CSS 来完成此操作。您需要向需要样式的行添加标识符（类等），重新排列 HTML 以便“子行”实际上是它们前面行的子行，或者添加 javascript。
这回答了你的问题了吗？ Resetting Odd/Even Sequence in HTML Table

标签： html css

【解决方案1】：

 try using this ____> tr:nth-of-type(odd)

【讨论】：