角材料表 - 列宽按字符串长度

如何解决角材料表 - 列宽按字符串长度

在我的应用程序中，我有一堆不同的材料表。 我想找到一些方法来自动设置列宽。

我知道，我可以像这样直接在 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