Материал Дизайн Mat-Table angular ширина столбца превышает ширину таблицы

Question

Я хочу, чтобы столбцы внутри таблицы занимали 100% таблицы, поэтому, если в одном столбце слишком много текста, размер другого должен измениться, чтобы все они поместились. Если невозможно сделать все эти столбцы внутри одной таблицы, я могу удалить некоторые столбцы и поместить их в код extendedDetail, но в любом случае мне бы хотелось, чтобы другие столбцы настраивались так, чтобы занимать все пространство

Right теперь это мой html код:

<div class="col-12 mt-3">
 <mat-form-field class="filter">
    <mat-label class="text-danger">Filtra</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="AG12WF2">
 </mat-form-field>
 <button mat-raised-button color="warn" [routerLink]="['/journey/add']" class="float-right position-absolute addButton">Aggiungi Viaggio</button>
</div>
<div class="mat-elevation-z8 w-100 text-center mb-3"> 
    <table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort class="w-75">
        <!-- ID Column -->
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger"> Numero Bolla </th>
            <td mat-cell *matCellDef="let journey"><a [routerLink]="['/journey/edit/', journey.id]" class="text-info">{{ journey.journeyNumber || "Da inserire"}}</a></td>
        </ng-container>
        <!-- DATE Column -->
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger"> Data </th>
            <td mat-cell *matCellDef="let journey">{{ journey.date | date: 'dd/MM/yyyy H:mm'}}</td>
        </ng-container>
        <!-- PLATE Column -->
        <ng-container matColumnDef="plate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger"> Targa </th>
            <td mat-cell *matCellDef="let journey"><a [routerLink]="['/vehicle/edit/', journey.vehicle.id]" class="text-info">{{ journey.vehicle.plate }}</a></td>
        </ng-container>
        <!-- DRIVER Column -->
        <ng-container matColumnDef="driver">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger"> Autista </th>
            <td mat-cell *matCellDef="let journey"><a [routerLink]="['/driver/edit/', journey.driver.id]" class="text-info">{{ journey.driver.surname }} {{journey.driver.name}}</a></td>
        </ng-container>
        <!-- DEPARTURE Column -->
        <ng-container matColumnDef="departure">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Partenza</th>
            <td mat-cell *matCellDef="let journey">{{journey.journeyAddress[0].address.name}}</td>
        </ng-container>
        <!-- DESTINATION Column -->
        <ng-container matColumnDef="destination">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Destinazione</th>
            <td mat-cell *matCellDef="let journey">{{ journey.journeyAddress[journey.journeyAddress.length-1].address.name}}</td>
        </ng-container>
        <!-- MEASURE UNIT Column -->
        <ng-container matColumnDef="measureUnit">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Unità di misura</th>
            <td mat-cell *matCellDef="let journey">{{ journey.measureUnit }}</td>
        </ng-container>
        <!-- QUANTITY Column -->
        <ng-container matColumnDef="quantity">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Quantità</th>
            <td mat-cell *matCellDef="let journey">{{ journey.quantity }}</td>
        </ng-container>
        <!-- VALUE FOR UNIT Column -->
        <ng-container matColumnDef="valueForUnit">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Valore unitario</th>
            <td mat-cell *matCellDef="let journey">{{ journey.valueForUnit }}</td>
        </ng-container>
        <!-- TIMESTOP Column -->
        <ng-container matColumnDef="timeStop">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Tempo sosta</th>
            <td mat-cell *matCellDef="let journey">{{ journey.timeStop }}</td>
        </ng-container>
        <!-- VALUE STOP TIME Column -->
        <ng-container matColumnDef="valueStopTime">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Valore tempo sosta</th>
            <td mat-cell *matCellDef="let journey">{{ journey.valueStopTime }}</td>
        </ng-container>
        <!-- CUSTOMER Column -->
        <ng-container matColumnDef="customer">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Fornitore</th>
            <td mat-cell *matCellDef="let journey">{{ journey.customer }}</td>
        </ng-container>
        <!-- CUSTOMER Column -->
        <ng-container matColumnDef="total">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center text-danger">Totale</th>
            <td mat-cell *matCellDef="let journey">{{ journey.total }}</td>
        </ng-container>
        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let journey" [attr.colspan]="displayedColumns.length">
        <div class="journey-detail" [@detailExpand]="journey == expandedElement ? 'expanded' : 'collapsed'">
            <div class="journey-description" *ngFor="let address of (journey.journeyAddress); let last = last; let first = first">
            <span class="text-uppercase font-weight-bold" *ngIf="!last && !first">{{ address.address.name}} - {{ journey.journeyAddress[journey.journeyAddress.length-1].address.name}}</span>
            </div>
        </div>
        </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let journey; columns: displayedColumns;" class="journey-row" [class.expanded-row]="expandedElement === journey"
        (click)="expandedElement = expandedElement === journey ? null : journey">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

В то время как это css:

tr.detail-row {
    height: 0;
}

tr.journey-row:not(.expanded-row):hover {
    background: #f1ff1a;
}

tr.journey-row:not(.expanded-row):active {
    background: #efefef;
}

.journey-row td {
    border-bottom-width: 0;
}

.journey-detail {
    overflow: hidden;
    display: flex;
}

.journey-description {
    padding: 16px;
}

.addButton{
    right: 0;
    top: -2.5rem;
}

::ng-deep .mat-sort-header-container {
    display: flex;
    justify-content: center;
}

.filter{
    position: absolute;
    top: -3rem;
    left: 0;
}

И это 2 примера изображения, чтобы объяснить проблему