如何更改垫子桌子内ng容器的宽度

时间:2018-10-29 18:10:39

标签: css angular-material formattable ng-container

mat表内的列宽度(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>

enter image description here

1 个答案:

答案 0 :(得分:1)

使用flex。

“ column_name”将是列的matColumnDef

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

喜欢选择

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