To ensure proper display in the table, it is important to not only use overflow-x but also include 'flex-basis' and 'flex-shrink' properties for the columns. In the example below, setting a flex-basis of 35% for each of the 3 columns expands the table width to 105%. Additionally, 'flex-shrink: 0' prevents the columns from shrinking when there is limited width available:
https://i.sstatic.net/xnVo9.jpg
app.component.html
<mat-table #table [dataSource]="payments" matSort class="mat-elevation-z8 overflow-x-auto">
<ng-container matColumnDef="payment_hash">
<mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</mat-header-cell>
<mat-cell *matCellDef="let payment">{{payment?.payment_hash}}</mat-cell>
</ng-container>
<ng-container matColumnDef="path">
<mat-header-cell *matHeaderCellDef mat-sort-header>Path</mat-header-cell>
<mat-cell *matCellDef="let payment">{{payment?.path}}</mat-cell>
</ng-container>
<ng-container matColumnDef="payment_preimage">
<mat-header-cell *matHeaderCellDef mat-sort-header>Payment Pre Image</mat-header-cell>
<mat-cell *matCellDef="let payment">{{payment?.payment_preimage}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
app.component.css
.overflow-x-auto {
overflow-x: auto;
}
mat-header-cell, mat-cell {
/*
flex-shrink: 0;
flex-basis: 35%;
*/
flex: 0 0 35%;
}