html - 条纹 tr 不包括子表

Question

我有一个表(Maintable)，其中包含信息和表内内容。此外，每个 tr 都有一个包含更多信息的子表，如果需要，可以折叠这些信息。现在，我希望主表中的 tr 是 strip 化的。我尝试使用:

 tr:nth-child(even)

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

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

示例如下:

<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>