mat-table - How to update the column width

Question

I have three columns in mat-table.

The first column is Number, the third column is date and the second column contains a big string.

I want the first column to be 15px, third column to be 100px and middle column rest of the width. In Percentages 5%, 85% 10%.

How can I achieve this in mat-table?

Answer 1

You can use flex property to achieve the desired behavior.

 //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%
}

Here is the stackblitz link to see the demo.

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