Add alternating rowcolor to Angular Material Table with expandable rows

Issue

Starting for the Angular Material example for a table with expandable Row (https://stackblitz.com/angular/ybxxqkoqknl?file=src%2Fapp%2Ftable-expandable-rows-example.css) I would like to add alternating rowcolors to that table. The standard solution (as shown below) is not working however, because of the expanded rows being present in the table (with height = 0). Could there be any alternative solution to make alternating rowcolors possible in this table?

.mat-row:nth-child(even){
    background-color: #eee;
}
.mat-row:nth-child(odd){
    background-color: white;
} 

Solution

You may try this CSS stylesheet. By default, all the rows (included detailed rows) will be background-color: white.

For every third & forth row (even row with its detailed row), background-color: #eee.

.mat-row {
  background-color: white;
}

.mat-row:nth-child(4n-1), .mat-row:nth-child(4n) {
  background-color: #eee;
}

Sample Solution on StackBlitz

Answered By - Yong Shun