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