title: Angular Material Table Column align
body: <p>I am using Angular Material Tables for my Project. I used some CSS in order to make the Table horizontally scrollable, whenever the content in the table would not be displayed anymore, which works just fine.
  But which occurs now is, that the first table column has now a very unusual width, when viewed in full screen mode (the whole table is visible). </p>
  
  <p>The Table:</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
      &lt;table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
          &lt;ng-container matColumnDef="Investor"&gt;
            &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Firm &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.investor}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="Location"&gt;
            &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Firm Eaum ($m) &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.location}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="Date"&gt;
            &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Shareholding in BAWAG &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.date}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="Comment"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Contact Name &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.comment}} &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;/table&gt;
      &lt;/div&gt;
      &lt;mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>  .mat-row:hover {
      background-color: rgb(228, 228, 228);
    }
  
    .example-container {
      display: block;
      width: 100%;
      overflow-x: auto;
  
    .mat-table {
      width: 100%;
      max-width: 100%;
      margin-bottom: 1rem;
      display: table;
      border-collapse: collapse;
      margin: 0px;
  }
  
  .mat-row,
  .mat-header-row {
      display: table-row;
  }
  
  .mat-cell,
  .mat-header-cell {
      word-wrap: initial;
      display: table-cell;
      padding: 0px 5px;
      line-break: unset;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      vertical-align: middle;
  }
    }
  </code></pre>
  
  <p>How can I overcome this problem?
  <a href="https://i.stack.imgur.com/b7572.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b7572.png" alt="enter image description here"></a></p>