Как изменить ширину ng-контейнера внутри mat-таблицы
Ширина столбцов (ng-container) внутри mat-таблицы делится поровну. Есть ли способ, которым я могу настроить на основе моих требований (содержание в столбце). Ex. На изображении ниже флажок принимает ширину, равную ширине других столбцов, что мне не нужно.
<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>
1 ответ
Используйте flex.
'column_name' будет matColumnDef столбца
.mat-column-'column_name'{
flex: 0 0 50px;
}
как для выбора
.mat-column-select{
flex: 0 0 50px;
}