title: How to resize dynamically the width of column table of Angular Material?
body: <p>I want resize the width of my table using angular material. I have obtained this:</p>
  <p><a href="https://i.stack.imgur.com/LlNgO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LlNgO.png" alt="enter image description here" /></a></p>
  <p>My columns are dynamic:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container *ngFor=&quot;let column of dataTable.getValues() ; let colIndex = index&quot; matColumnDef=&quot;{{column.label}}&quot; class=&quot;columnSize&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{column.label}}&lt;/th&gt;
    &lt;td mat-cell  *matCellDef=&quot;let row&quot; [style.color]=&quot;color&quot;&gt; {{row[colIndex].value }} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>and I have tried different solution to resize my columns width, for example:</p>
  <pre class="lang-css prettyprint-override"><code>.mat-header-cell {
    flex: 0 0 75px !important;
  }
  </code></pre>
  <p>But the results is the same.</p>