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

Posted 2023-03-06

【中文标题】为啥 <table mat-table> 不应用 flexbox 属性？

【英文标题】：Why doesn't <table mat-table> apply flexbox properties?为什么 <table mat-table> 不应用 flexbox 属性？

【发布时间】：2020-01-11 09:08:51

【问题描述】：

在我的模板中，

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

【参考方案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; CSS 属性将变为活动状态，因为mat-row 的显示类型现在为flex。

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