如何指定角度材料表中列的宽度？

Question

<mat-tab class="StatusTab" label="Status">
 <mat-table class="table mat-elevation-z10" [dataSource]="statusDetails">
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef>Staff-id</mat-header-cell>
                <mat-cell *matCellDef="let staff">{{staff.staff_id}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
                <mat-cell *matCellDef="let staff">{{staff.name}}</mat-cell>
            </ng-container>
            <ng-container style="width: 10px;" matColumnDef="status">
                <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
                <mat-cell *matCellDef="let staff">{{staff.status}}</mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="columns"></mat-header-row>
            <mat-row *matRowDef="let staff;columns:columns"></mat-row>
 </mat-table>
</mat-tab>

css : .table{
    width: 100%;
    margin:50px;
}

.mat-column-id{
    width: 32px;
    border-right: 1px solid black;
}

默认宽度太长，无法向右滚动，我想指定宽度。

我尝试使用 .mat-column-COLUMNNAME 但它不起作用。但这仅在我使用 时才有效。

您还应该使用

max-width

CSS 规则来强制列的最大宽度。

.mat-column-id {
  width: 32px;
  border-right: 1px solid black;
  max-width: 32px;
}

演示@StackBlitz

Answer 1

您还应该使用

max-width

CSS 规则来强制列的最大宽度。

.mat-column-id {
  width: 32px;
  border-right: 1px solid black;
  max-width: 32px;
}

演示@StackBlitz