条纹 tr 不包括子表

Question

我有一张表（Maintable），里面有信息。此外，每个 tr 都有一个包含更多信息的子表，如果需要，可以折叠这些信息。现在，我希望主表中的 tr 被条带化。我尝试使用：

 tr:nth-child(even)

不幸的是，子表中的 tr 也计算了偶数和奇数。因此，它不起作用。

所以我的问题是，是否以及如何仅使用“Maintable”并对这些行进行条带化。

这里有一个例子：

<table class="maintable_use_for_striped">
  <tr>
    <td>Hr.</td>
    <td>Blub</td>
    <td><a role="button" class="btn btn-primary collapsed" data-toggle="collapse" href="#collapse_96" aria-expanded="false" aria-controls="collapseExample">mehr</a></td>
  </tr>
  <tr>
    <td colspan="11" class="collapseTd">
      <div class="additonalInformation collapse" id="collapse_96" aria-expanded="false" style="height: 0px;">
        <table class="subtable_use_not_for_striped">
          <tbody>
            <tr>
              <td>Content 1</td>
            </tr>
            <tr>
              <td>Content 2</td>
            </tr>   
          </tbody>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td>Hr.</td>
    <td>Blub</td>
    <td><a role="button" class="btn btn-primary collapsed" data-toggle="collapse" href="#collapse_96" aria-expanded="false" aria-controls="collapseExample">mehr</a></td>
  </tr>
  <tr>
    <td colspan="11" class="collapseTd">
      <div class="additonalInformation collapse" id="collapse_96" aria-expanded="false" style="height: 0px;">
        <table class="subtable_use_not_for_striped">
          <tbody>
            <tr>
              <td>Content 1</td>
            </tr>
            <tr>
              <td>Content 2</td>
            </tr>   
          </tbody>
        </table>
      </div>
    </td>
  </tr>
</table>

Answer 1

查看我在下面制作的嵌套表。

使用了这个选择器：

table.outer > tbody > tr:nth-child(even) {
  background: #ddd;
}

请让我知道您对此的反馈。谢谢！

table {
  border-collapse: collapse;
}
table.outer > tbody > tr:nth-child(even) {
  background: #ddd;
}

<table class="outer" border="1">
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
      </table>
    </td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>

</table>