问题描述
在我的应用程序中,我有一堆不同的材料表。 我想找到一些方法来自动设置列宽。
我知道,我可以像这样直接在 CSS 中设置它,然后我试试这个
.mat-column-position {
flex: 0 0 10%;
}
.mat-column-name {
flex: 0 0 25%;
}
.mat-column-weight {
flex: 0 0 25%;
}
.mat-column-symbol {
flex: 0 0 25%;
}
但是这样,我需要手动设置每个表格的宽度。
我也尝试使用 SCSS 动态设置 CSS
@mixin mat-table-columns($columns)
{
.mat-column-
{
@each $colName,$props in $columns {
$width: map-get($props,'width');
&#{$colName}
{
flex: $width;
min-width: $width;
@if map-has-key($props,'color')
{
color: map-get($props,'color');
}
}
}
}
}
@include mat-table-columns((
orderid: (width: 6rem,color: gray),date: (width: 9rem),items: (width: 20rem)
));
但在所有这些想法中,我都需要手动设置宽度。
我试着找,有没有什么办法可以自动设置相对于长度最长的字符串的宽度
| abc | abcdefg | abcdefgh |
| abcde | abc | abc |
| ab | abcdef | abc |
以 stackblitz 为例。谢谢
解决方法
我建议使用原生表格元素,这样您的单元格将自动调整大小,您不必担心手动设置它们。
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
https://stackblitz.com/edit/angular-8kyrsp-gnhbfd?file=src%2Fapp%2Ftable-flex-basic-example.css