mat-table -如何更新列宽

Question

我在mat-table有三列。

第一列是Number，第三列是date，第二列包含一个大字符串。

我希望第一列是15px，第三列是100px，中间列是宽度的其余部分。以5%，85%，10%的百分比表示。

我如何在mat-table中实现这一点？

Answer 1

您可以使用flex属性来实现所需的行为。

 //First column and header
.mat-header-cell:first-child,.mat-cell:first-child{
  flex:5%;
}
//Second column and header
.mat-header-cell:nth-child(2),.mat-cell:nth-child(2){
  flex:85%;
}
//Last column and header
.mat-header-cell:last-child,.mat-cell:last-child{
  flex:10%
}

下面是观看演示的stackblitz链接。

https://stackblitz.com/edit/angular-155qbp