md-table - How to update the column width

Solution 1:

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.

Solution 2:

Right now, it has not been exposed at API level yet. However you can achieve it using something similar to this

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

In css, you need to add this custom class -

.customWidthClass{
   flex: 0 0 75px;
}

Feel free to enter the logic to append class or custom width in here. It will apply custom width for the column.

Since md-table uses flex, we need to give fixed width in flex manner. This simply explains -

0 = don't grow (shorthand for flex-grow)

0 = don't shrink (shorthand for flex-shrink)

75px = start at 75px (shorthand for flex-basis)

Plunkr here - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview