mat-table

Question

我在 mat-table 中有三列。

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

我希望第一列为 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 link 查看演示。

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

mat-table - 如何更新列宽

mat-table - How to update the column width

angular-material