垫表自动适合列宽以容纳更大的内容 [英] 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: 'mail1@mail.com', name: 'Long name for this person'},
{email: 'mail2@mail.com': 'name2',
{email: 'longmailaddres@longmailaddress.com: 'name3'}
];
因此,对于"longmailaddress@longmailaddres.com"和此人的姓氏",宽度单元格就足够了.
So, width cells will be enough for "longmailaddress@longmailaddres.com" 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-table
columns (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屋!