title: Angular 6 material ui table ful width
body: <p>I have a table inside a mat-card but the content of the table is not in full width.</p>
  
  <p>setting the table as widht: 100% doesn't work</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" class="mat-elevation-z8 resultsTable"&gt;
      &lt;ng-container class="col-2" matColumnDef="id"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; ID gestión &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container class="col-2" matColumnDef="solicitante"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Solicitante &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.solicitante}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container class="col-2" matColumnDef="tipoTramite"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Tipo de trámite &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.tipoTramite}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container class="col-3" matColumnDef="fechaAsignacion"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Fecha de asignación &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.fecha}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container class="col-2" matColumnDef="encargadoActual"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Encargado actual &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.encargadoActual}}&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;
  </code></pre>