Question

我有一个表（Maintable），其中包含信息和表格。此外，每个tr都有一个子表，其中包含可以根据需要折叠的更多信息。现在，我希望维护中的tr被条带化。我试着用：

 tr:nth-child(even)

不幸的是，子表中的tr也计算偶数和奇数。因此，它无法正常工作。

所以我的问题是，是否以及如何使用＆＃34; Maintable＆＃34;和条纹这些行。

这里有一个例子：

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

条纹tr不包括子表

1 个答案: