title: Angular Material Table Width 100%
body: <p>I'm using material table inside angular material card. Here is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card style="margin: 5px;font-family:Arial, Helvetica, sans-serif!important;font-size:10px !important;" class="mat-elevation-z15"
    fxFlex&gt;
    &lt;mat-card-content fxLayout="column" fxLayoutAlign="space-between" fxFlex&gt;
      &lt;h4&gt;Incidents&lt;/h4&gt;
      &lt;mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
        &lt;ng-container matColumnDef="number"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Number&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.number }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="desc"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Description&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.desc }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="assn_group"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Group&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.assn_group }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="product"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Product&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.product }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="state"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;State&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.state }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="opened"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Opened&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.opened }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="sla_group"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;SLA Group&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;{{ element.sla_group }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/mat-table&gt;
  
  
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>And the table width set to 100%. it gets extended fully in the code but the columns not fully using the 100% of the table width</p>
  
  <p>Attaching table screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/JJKG8.jpg" alt="Screenshot of the table"></p>