title: angular material table resize column
body: <p>I am trying to show some data on my webpage with an angular material table but the view doesn't look so good what should I do?
   I want to have resizable column and data be in the right place not like that and messy</p>
  
  <p>this is my HTML code that shows the whole data</p>
  
  <pre><code>&lt;mat-card&gt;customer card&lt;/mat-card&gt;
  &lt;div&gt;
    &lt;mat-table [dataSource]="dataSource" class="mat-elevation-z8"  class="table"&gt;
      &lt;!-- Position Column --&gt;
      &lt;ng-container matColumnDef="firstName"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; firstName &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.firstName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="lastName"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; lastName &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.lastName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="email"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; email &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.email}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="phoneNumber"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; phoneNumber &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.phoneNumber}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="orderStatus"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; orderStatus &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.orderStatus}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="deliveryDate"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; deliveryDate &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.deliveryDate}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="storeName"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; storeName &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.storeName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="storeAddress"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; storeAddress &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.storeAddress}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="storePhone"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; storePhone &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.storePhone}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
  
  
     &lt;ng-container matColumnDef="price"&gt;
        &lt;th mat-header-cell *matHeaderCellDef &gt;price&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt;
          &lt;mat-form-field&gt;
            &lt;input [(ngModel)]="element.price" matInput placeholder="Price" name="price"&gt;
          &lt;/mat-form-field&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt; 
  
      &lt;ng-container matColumnDef="save"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt;
          &lt;button (click)="post(element.price)" mat-button&gt;save&lt;/button&gt;&lt;/td&gt;
      &lt;/ng-container&gt; 
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  
    &lt;/mat-table&gt;
    &lt;!-- &lt;button (click)="post(price)" mat-button&gt;save&lt;/button&gt; --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is my CSS that I use </p>
  
  <pre><code>.mat-table {
    width: 100%;
    overflow: auto;
  }
  
  mat-cell,
  mat-footer-cell,
  mat-header-cell {
    width: 200px;
    flex: none;
    justify-content: center;
  }
  
  .mat-table mat-cell:first-child {
    padding-left: 0px;
    border-left: 1px solid;
  }
  
  .mat-table mat-cell:last-child {
    padding-right: 0px;
  }
  
  .mat-table mat-header-cell:first-child {
    padding-left: 0px;
    border-left: 1px solid;
  }
  
  .mat-table mat-header-cell:last-child {
    padding-right: 0px;
  }
  
  .mat-table mat-header-cell {
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    cursor: col-resize;
  }
  
  .mat-table mat-cell {
    border-right: 1px solid;
    border-bottom: 1px solid;
  }
  </code></pre>
  
  <p>and this is the result. and the output doesn't look good at all. what should i do? 
  <a href="https://i.stack.imgur.com/ClpWf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ClpWf.png" alt="enter image description here"></a></p>