css - 如何更改 mat-table 内 ng-container 的宽度

Question

mat-table 内的列（ng-container）的宽度是平分的。有没有办法可以根据我的要求进行调整（列上的内容）。前任。在下图中，复选框与其他列的宽度相同，这不是我需要的。

<mat-table #table matSort [dataSource]="dataSource"> 
<!-- Checkbox Column -->
<ng-container matColumnDef="select">  
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && 
!isAllSelected()">  
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() &&    
 !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>

<ng-container matColumnDef="paymentcode">
<mat-header-cell *matHeaderCellDef mat-sort-header> Family Code </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.paymentcode}} </mat-cell>
</ng-container>

Answer 1

使用弹性。

'column_name' 将是该列的 matColumnDef

.mat-column-'column_name'{
   flex: 0 0 50px;
}

喜欢选择

.mat-column-select{
   flex: 0 0 50px;
}