Reports

Blacklisted phrase (0.5): I need
Blacklisted phrase (1): m facing the same problem
Long answer (-0.5):
Has code block (-0.5):
Me too answer (2.5): I am facing the same problem
Low reputation (0.5):

I am facing the same problem. What about this solution. I will use nth-of-type() so I need another type of row.

<div class='table-row-expand'>

so your table would be:

<table>
  <tr class='header-row'>
    <th> </th>
  </tr>
  <tr class='table-row'>
    <td> // first row (should be gray)</td>
  </tr>
  <div class='table-row-expand'>
    <td> // expanded row (should not be colored)
      <div>
        <p-table> // child table </p-table>
      </div>
    </td>
  </div>
  <tr class='table-row'>
    <td> // second row (should be yellow)</td>
  </tr>
  <tr class='table-row'>
    <td> // third row (should be gray)</td>
  </tr>
</table>

and SCSS:

.table-row-expand {
  display: table-row;
}

tr:nth-of-type(odd) {
  background-color: yellow;
  & + div.expand-row {
       background-color: yellow; // as a bonus you can set same background color to expanded "row"
  }
}

tr:nth-of-type(even) {
  background-color: grey;
  & + div.expand-row {
       background-color: grey;
  }
}

seems to work.

79360888