如何更改 mat-table 内 ng-container 的宽度
how do I change width of ng-container inside mat-table
mat-table内的columns(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>
使用弹性。
'column_name' 将是列的 matColumnDef
.mat-column-'column_name'{
flex: 0 0 50px;
}
喜欢 select
.mat-column-select{
flex: 0 0 50px;
}
mat-table内的columns(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>
使用弹性。
'column_name' 将是列的 matColumnDef
.mat-column-'column_name'{
flex: 0 0 50px;
}
喜欢 select
.mat-column-select{
flex: 0 0 50px;
}