How can I get a mat-table to resize automatically to fit headers

Question

I have a mat-table where I have center-aligned the headers and cells using the following css:

.center-align.mat-header-cell {
  display: flex !important;
  justify-content: center !important;
  padding-left: 18px !important;
}
.center-align.mat-footer-cell {
  display: flex !important;
  justify-content: center !important;
}
.center-align.mat-cell {
  display: flex !important;
  justify-content: center !important;
}
.left-align.mat-header-cell {
  padding-right: 18px !important;
}

and what I end up with is this: My Table

Here is the code in stackblitz

The issue I want to solve is that one of the column headers ("Amount 9 Column Name") is getting wrapped. There is plenty of room to make the other columns a little narrower. Is there a way I can get the cells to automatically resize a little as so this header is not wrapped? I have seen some other posts around manually setting the column width of other columns using something like:

.mat-column-position {
  flex: 0 0 100px;
}

but I want to avoid doing that if I can. I don't want to have to go through every table on every page and adjust multiple columns. Thanks.

UPDATE: I still haven't solved this but if I update the html to:

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource"  matSort>
      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="left-align"> Name </th>
         <td mat-cell *matCellDef="let element" class="left-align"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="position">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Position </th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.position}} </td>
      </ng-container>
      <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount}} </td>
      </ng-container>
      <ng-container matColumnDef="amount2">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 2</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount2}} </td>
      </ng-container>
      <ng-container matColumnDef="amount3">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 3</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount3}} </td>
      </ng-container>
      <ng-container matColumnDef="amount4">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 4</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount4}} </td>
      </ng-container>
      <ng-container matColumnDef="amount5">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 5</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount5}} </td>
      </ng-container>
      <ng-container matColumnDef="amount6">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 6</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount6}} </td>
      </ng-container>
      <ng-container matColumnDef="amount7">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 7</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount7}} </td>
      </ng-container>
      <ng-container matColumnDef="amount8">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 8</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount8}} </td>
      </ng-container>
      <ng-container matColumnDef="amount9">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 9 Column Name</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount9}} </td>
      </ng-container>
      <ng-container matColumnDef="amount10">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 10</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount10}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

and the CSS to:

table{
  width:100%;
}
.mat-header-row {
  background-color: #3F51B5;
  color: white;
  font-weight: bold;
}

.mat-header-cell {
  color: white;
  font-weight: bold;
  border-right: solid 0.5px white;
}
.mat-row:nth-child(odd) {
  background-color: white;
}

.mat-row:nth-child(even) {
  background-color: #D3D3D3;
}
.mat-cell{
  border-right: solid 0.5px black;
}
.center-align.th {
  display: flex !important;
  justify-content: center !important;
  padding-left: 18px !important;
}
.center-align.td {
  display: flex !important;
  justify-content: center !important;
}
.left-align.th {
  padding-right: 18px !important;
}

then the columns fit the content but the stuff I have done for centering the content and headers of each column no longer works.

Answer 1

I figured this out eventually. In case anyone else might want to know you can see the answer here: stackblitz

Basically I used table, th, and td instead of mat-table, mat-header-cell, and mat-cell elements in the html:

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource"  matSort>
      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="left-align-header" > Name </th>
         <td mat-cell *matCellDef="let element" class="left-align-cell"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="position">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
         <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
      <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount</th>
         <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
      </ng-container>
      <ng-container matColumnDef="amount2">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 2</th>
         <td mat-cell *matCellDef="let element"> {{element.amount2}} </td>
      </ng-container>
      <ng-container matColumnDef="amount3">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 3</th>
         <td mat-cell *matCellDef="let element"> {{element.amount3}} </td>
      </ng-container>
      <ng-container matColumnDef="amount4">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 4</th>
         <td mat-cell *matCellDef="let element"> {{element.amount4}} </td>
      </ng-container>
      <ng-container matColumnDef="amount5">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 5</th>
         <td mat-cell *matCellDef="let element"> {{element.amount5}} </td>
      </ng-container>
      <ng-container matColumnDef="amount6">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 6</th>
         <td mat-cell *matCellDef="let element"> {{element.amount6}} </td>
      </ng-container>
      <ng-container matColumnDef="amount7">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 7</th>
         <td mat-cell *matCellDef="let element"> {{element.amount7}} </td>
      </ng-container>
      <ng-container matColumnDef="amount8">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 8</th>
         <td mat-cell *matCellDef="let element"> {{element.amount8}} </td>
      </ng-container>
      <ng-container matColumnDef="amount9">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 9 Column Name</th>
         <td mat-cell *matCellDef="let element"> {{element.amount9}} </td>
      </ng-container>
      <ng-container matColumnDef="amount10">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 10</th>
         <td mat-cell *matCellDef="let element"> {{element.amount10}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" ></tr>
   </table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

set table-overview-example.css to

table{
  width:100%;
}
.mat-header-row {
  background-color: #3F51B5;
  color: white;
  font-weight: bold;
}

.mat-header-cell {
  color: white;
  font-weight: bold;
  border-right: solid 0.5px white;
}

.mat-row:nth-child(odd) {
  background-color: white;
}

.mat-row:nth-child(even) {
  background-color: #D3D3D3;
}
.mat-cell{
  border-right: solid 0.5px black;
}

and set styles.css to

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

    body { 
      font-family: Roboto, Arial, sans-serif;
      margin: 0;
    }

    .basic-container {
      padding: 30px;
    }

    .version-info {
      font-size: 8pt;
      float: right;
    }

    .mat-sort-header-container{
      justify-content: center !important;
       padding-left: 18px !important; /* Allow for sort icon*/
    } 

    .mat-cell{
       text-align: center;
     } 

     .left-align-cell.mat-cell{
       text-align: left;
     }

     .left-align-header>.mat-sort-header-container{
      justify-content: flex-start !important;
      padding-left:0px !important;
    }