title: Mat-table with expandable rows, remove hidden rows
body: <p>I am using this stackblitz example of nested material tables to create similar table in my project.
  <a href="https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts</a></p>
  
  <p>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.</p>
  
  <p>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 
   <a href="https://i.stack.imgur.com/dV227.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dV227.png" alt="enter image description here"></a></p>
  
  <p>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</p>
  
  <pre><code>&lt;tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"&gt;&lt;/tr&gt;
  </code></pre>