3

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?

Chatra
  • 2,989
  • 7
  • 40
  • 73

1 Answers1

7

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

ark
  • 3,707
  • 5
  • 21
  • 36
  • is there any way to define same size for the column even screen size changes? https://stackoverflow.com/questions/65296518/how-to-support-same-column-size-when-screen-size-reducing-in-angular-material-ta – app Dec 14 '20 at 23:07
  • https://stackoverflow.com/questions/65296518/how-to-support-same-column-size-when-screen-size-reducing-in-angular-material-ta – app Dec 14 '20 at 23:09