mat-table自动适合列宽到更大的内容

Question

我有一个mat-table我想自动适合列宽,任何人都会有最长的列内容.

<mat-table #table [dataSource]="dataSource">

 <ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef class="myHeader"> No. </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myCell"> {{element.email}} </mat-cell>
 </ng-container>

 <ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef class="myHeader"> Name </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myCell"> {{element.name}} </mat-cell>
 </ng-container>

</mat-table>

数据示例:

const DATA: Data[] = [
 {email: 'mail1@mail.com', name: 'Long name for this person'},
 {email: 'mail2@mail.com': 'name2',
 {email: 'longmailaddres@longmailaddress.com: 'name3'}
];

因此,宽度单元格足以用于"longmailaddress@longmailaddres.com"和"long person for this person".

我的选择不起作用,我尝试使用FxFlexFill和fxFlex unsucced这是我的css unsucced选项.

.myHeader, .myCell{
  flex: 0 0 100px;
  white-space: nowrap;
}

有人能帮助我吗？

Answer 1

你现在可能已经解决了这个问题,但是在这里发布给其他可能遇到此问题的人.

我用这个作为参考:https: //github.com/angular/material2/issues/5808

它不是自动调整大小的列,但这是您在特定mat-table列上设置宽度的方法(默认情况下内容包装):

mat-cell:nth-child(1),
mat-header-cell:nth-child(1) {
    flex: 0 0 30%;
}

mat-cell:nth-child(5),
mat-header-cell:nth-child(5) {
    flex: 0 0 10%;
}

如果您想使用自动调整大小,则必须<table>根据此问题的解决方案使用本机:https: //github.com/angular/material2/issues/5866