mat-table-如何更新列宽

时间:2018-12-27 16:40:36

标签: angular-material mat-table

我在垫子桌子上有三列。

第一列是数字,第三列是日期,第二列是一个大字符串。

我希望第一列为15px,第三列为100px,中间列为其余宽度。百分比为5%,85%为10%。

如何在mat-table中实现这一目标?

1 个答案:

答案 0 :(得分:2)

您可以使用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