DS87 DS87 - 3 months ago 13
CSS Question

Striped tr excluding subtable

I have a table (Maintable) with information and inside the table. Furthermore, each tr has a sub-table with further information that can be collapsed if needed. Now, i want the tr's in the maintable to be striped. I tried out to use:

tr:nth-child(even)


Unfortunately, also the tr's from the subtable are counting for the even and odd. Therefore, it is not working.

So my question is, whether and how it is possible just to use the "Maintable" and stripe these rows.

An example is here:

<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

Check out the nested table that I have made below.

Used this selector:

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

Please let me know your feedback on this. Thanks!

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>