角度数据表看起来太紧了

Question

这是我的数据表代码。这些列太挤在一起了，很难区分它们。我尝试更改 CSS 中列的间距和宽度，添加自定义 ngClass 但没有任何效果。我应该怎么做才能解决这个问题？

  <table id="order-information" mat-table [dataSource]="dataSource" matSort class="order-table w-100-p mt-24">
        <ng-container matColumnDef="DeliveryNumber" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'w-75'">Tesellüm No</th>
            <td mat-cell *matCellDef="let row" [ngClass]="'w-75'">
                <div>{{row?.DeliveryNumber}}</div>
            </td>
        </ng-container>
        <ng-container matColumnDef="StockIntegrationCode" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'w-75'">Stok Kodu</th>
            <td mat-cell *matCellDef="let row" [ngClass]="'w-75'"> {{row?.Product?.StockIntegrationCode}} </td>
        </ng-container>
        <ng-container matColumnDef="ProductName" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'w-100'">Stok Adı</th>
            <td mat-cell *matCellDef="let row" [ngClass]="'w-100'"> {{row?.Product?.ProductName}} </td>
        </ng-container>
        <ng-container matColumnDef="QuantityIn">
            <th mat-header-cell *matHeaderCellDef> Miktar </th>
            <td mat-cell *matCellDef="let row"> {{row.QuantityIn}} </td>
        </ng-container>
        <ng-container matColumnDef="UnitTypeId">
            <th mat-header-cell *matHeaderCellDef> Birim </th>
            <td mat-cell *matCellDef="let row"> {{row?.UnitTypeId}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
    </table>

Answer 1

尝试删除所有宽度类（w-100、w-75、...），然后看看它的外观。