md-table – How to update the column width

When Material creates the table it automagically applies two class-names for you which you can use to style each column.
In the the example below the styles is named mat-column-userId and cdk-column-userId.

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

Now you can use those names in css:

.mat-column-userId {
  flex: 0 0 100px;
}

Similar to Rahul Patil’s answer, but you don’t need to add another class to your column definitions.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)