title: How to fix this material table with expandable row example when using mat-* elements
body: <p>I'm trying to apply the same principles to get an expandable row for my tables in the &quot;Table with expandable rows&quot; <a href="https://material.angular.io/components/table/examples" rel="nofollow noreferrer">example</a>.</p>
  <p>I have styled my version of the tables similarly but cannot get the expanded portion of the tables correctly rendered. The expanded details doesn't expand the corresponding row, it just renders on top of the table overlapping. The only difference with my version is that I'm using the custom <code>mat-*</code> elements to create the tables.</p>
  <p>using native elements</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table mat-table ...&gt;
    ...
    &lt;tr mat-header-row *matHeaderRowDef=&quot;columnsToDisplay&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let element; columns: columnsToDisplay;&quot;
        class=&quot;example-element-row&quot;
        [class.example-expanded-row]=&quot;expandedElement === element&quot;
        (click)=&quot;expandedElement = expandedElement === element ? null : element&quot;&gt;
    &lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let row; columns: ['expandedDetail']&quot; class=&quot;example-detail-row&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/eTfvP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eTfvP.png" alt="enter image description here" /></a></p>
  <p>using mat-* elements</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-table ...&gt;
    ...
    &lt;mat-header-row *matHeaderRowDef=&quot;columnsToDisplay&quot;&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef=&quot;let element; columns: columnsToDisplay;&quot;
        class=&quot;example-element-row&quot;
        [class.example-expanded-row]=&quot;expandedElement === element&quot;
        (click)=&quot;expandedElement = expandedElement === element ? null : element&quot;&gt;
    &lt;/mat-row&gt;
    &lt;mat-row *matRowDef=&quot;let row; columns: ['expandedDetail']&quot; class=&quot;example-detail-row&quot;&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/jG7Je.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jG7Je.png" alt="enter image description here" /></a></p>
  <p>From my understanding, it's the styling of the <code>mat-*</code> elements that's causing issues. I definitely had to make some tweaks to the style to fix some issues, but I don't know what else to do to fix the example completely.</p>
  <pre class="lang-css prettyprint-override"><code>mat-table {
    width: 100%;
  }
  
  mat-row.example-detail-row {
    height: 0;
    min-height: initial; /* override mat-row styling */
  }
  
  mat-row.example-element-row:not(.example-expanded-row):hover {
    background: whitesmoke;
  }
  
  mat-row.example-element-row:not(.example-expanded-row):active {
    background: #efefef;
  }
  
  .example-element-row, /* override mat-row styling */
  .example-element-row mat-cell {
    border-bottom-width: 0;
  }
  </code></pre>
  <p>How can I fix this?</p>
  <p><a href="https://stackblitz.com/edit/angular-jxylk2?file=src%2Fapp%2Ftable-expandable-rows-example.html" rel="nofollow noreferrer">stackblitz</a></p>