为什么 <table mat-table> 不应用 flexbox 属性?
Why doesn't <table mat-table> apply flexbox properties?
在我的模板中,
...
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
...
在我的模板样式中我有
...
.mat-column-name {
color: red;
// flex: 0 1 200px !important; // not getting applied
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
...
我想控制列宽。但是当在 mat-column-name
中使用 flex
属性 时,它不会被应用。作为解决方法,我使用 max-width
。它有点管用,但我不明白 max-width
是如何习惯于让它响应的
编辑:
工作代码 Stackblitz Demo
使用 <mat-table ...
而不是 <table mat-table...
来启动 flexbox
我正在使用
<table mat-table ...
...
<ng-container ...
<th ..
<td ..
...
我需要改为
<mat-table ...
<ng-container ...
<mat-header-cell ...
<mat-cell ...
...
您的 flex: 0 1 200px;
CSS 属性 将激活,因为 mat-row
的显示类型现在是 flex
。
见https://material.angular.io/components/table/overview#tables-with-display-flex
在我的模板中,
...
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
...
在我的模板样式中我有
...
.mat-column-name {
color: red;
// flex: 0 1 200px !important; // not getting applied
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
...
我想控制列宽。但是当在 mat-column-name
中使用 flex
属性 时,它不会被应用。作为解决方法,我使用 max-width
。它有点管用,但我不明白 max-width
是如何习惯于让它响应的
编辑: 工作代码 Stackblitz Demo
使用 <mat-table ...
而不是 <table mat-table...
来启动 flexbox
我正在使用
<table mat-table ...
...
<ng-container ...
<th ..
<td ..
...
我需要改为
<mat-table ...
<ng-container ...
<mat-header-cell ...
<mat-cell ...
...
您的 flex: 0 1 200px;
CSS 属性 将激活,因为 mat-row
的显示类型现在是 flex
。
见https://material.angular.io/components/table/overview#tables-with-display-flex