CSS mat-table 自动使列宽适应更大的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48684560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mat-table auto fit column width to bigger content
提问by cucuru
I have a mat-table I want to auto fit column width, anyone will be as long as the longest column content.
我有一个 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>
Data example:
数据示例：
const DATA: Data[] = [
{email: '[email protected]', name: 'Long name for this person'},
{email: '[email protected]': 'name2',
{email: '[email protected]: 'name3'}
];
So, width cells will be enough for "[email protected]" and for "Long name for this person".
因此，宽度单元格对于“[email protected]”和“此人的长名称”就足够了。
My choices doesnt work, I tried with FxFlexFill and fxFlex unsucced this is my css unsucced option.
我的选择不起作用，我尝试使用 FxFlexFill 和 fxFlex unsucced 这是我的 css unsucced 选项。
.myHeader, .myCell{
flex: 0 0 100px;
white-space: nowrap;
}
Can somebody help me?
有人可以帮助我吗？
回答by metalkat
You've probably solved this by now, but posting here for anyone else who might come across this.
您现在可能已经解决了这个问题，但在这里发布给可能遇到此问题的任何其他人。
I used this for reference: https://github.com/angular/material2/issues/5808
我用这个作为参考：https: //github.com/angular/material2/issues/5808
It's not an auto-sizing column, but this is how you set widths on specific mat-tablecolumns (the contents wrap by default):
它不是自动调整大小的列，但这是您在特定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%;
}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
如果您想使用自动调整大小，则必须<table>根据此问题的解决方案使用本机：https:
//github.com/angular/material2/issues/5866
