垫表自动适合列宽以容纳更大的内容 [英] mat-table auto fit column width to bigger content

问题描述

我有一个席子表，我想自动适应列宽，任何人只要列内容最长即可.

I have a mat-table I want to auto fit column width, anyone will be as long as the longest column content.

<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: '[e-mail]', name: 'Long name for this person'},
 {email: '[e-mail]': 'name2',
 {email: '[e-mail]: 'name3'}
];

因此，对于"[e-mail]"和此人的姓氏"，宽度单元格就足够了.

So, width cells will be enough for "[e-mail]" and for "Long name for this person".

我的选择不起作用，我尝试使用FxFlexFill和fxFlex不成功，这是我的css不成功的选项.

My choices doesnt work, I tried with FxFlexFill and fxFlex unsucced this is my css unsucced option.

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

有人可以帮我吗?

推荐答案

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

You've probably solved this by now, but posting here for anyone else who might come across this.

我以此为参考: https://github.com/angular/material2/issues/5808

这不是自动调整大小的列，但这是您在特定的mat-table列上设置宽度的方式(默认情况下，内容会自动换行):

It's not an auto-sizing column, but this is how you set widths on specific mat-tablecolumns (the contents wrap by default):

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

If you want to use auto-sizing you'll have to use native <table> as per the solution on this issue: https://github.com/angular/material2/issues/5866

这篇关于垫表自动适合列宽以容纳更大的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！