Question

在我的模板中，

...
  <!-- 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;
}
...

我想控制列宽。但是，在flex中使用mat-column-name属性时，不会应用它。解决方法是使用max-width。这种方法行得通，但是我不明白max-width是如何习惯于使其具有响应能力的

编辑：工作代码Stackblitz Demo

Answer 1

使用<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;的显示类型现在为mat-row，因此您的flex CSS属性将变为活动状态。

请参见https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-

为什么<table mat-table>不应用flexbox属性？

1 个答案: