md-table - How to update the column width

Question

I have started using the md-table for my project, and I want fixed column width. Currently all columns width are divided into equal size.

Where can I get the documen

Answer 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.

Answer 2

Check this: https://github.com/angular/material2/issues/5808

Since material2 is using flex layout, you can just set fxFlex="40" (or the value you want for fxFlex) to md-cell and md-header-cell.

Answer 3

You can now do it like this

<cdk-cell [style.flex]="'0 0 75px'">

Answer 4

You can also use the element selectors:

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

But jymdman's answer is the most recommended way to go in most cases.

Answer 5

I got the very easy solution for this - setting different width for column in style sheet by overriding the both cell and header cell:

Example - setting custom width for 1st and 5th column:

.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
  flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
  flex: 0 0 10%;
}

github

Answer 6

You can set the .mat-cell class to flex: 0 0 200px; instead of flex: 1 along with the nth-child.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}