Q:

Mat-table with expandable rows, remove hidden rows

I am using this stackblitz example of nested material tables to create similar table in my project.
https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts
This approach creates a "hidden" row, if you will inspect the page there will be rows with class "example-element-row" followed by a row with class "example-detail-row". The "example-detail-row". is the hidden one.
The issue I have is related to my corporate CSS table class which adds extra padding + strip like view (every even row is has gray background) - with this CSS classes my table looks awful as hidden row is displayed anyway 
 
Is it possible to overcome this issue? I tried to add ngif with some flag to code below, but it breaks expandable rows feature even though the table is rendered very well
<tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

A:

To replicate the behavior caused by your corporate CSS, I added the following CSS block to the stackblitz link which you shared:
tr td {
  padding:5px 0;
}

this is typical over-arching css rules for websites... to resolve, we just need to override this through a more detailed css rule:
.mat-row.example-detail-row td{
/* comment this to see the problem behavior */
  padding:0;
}

complete working stackblitz here

