角度材质表 - 如何指定列的宽度

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

但它不起作用。但这只有在我使用

<table mat-table>

时才有效。

Answer 1

您还应该使用

max-width

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

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

演示@StackBlitz