Angular Material column width fit content?

Question

This is my actual Angular Material table:

I would like the column width to fit the content so that the header and the rows content occupy one line.

Tried adding padding and margin with:

.mat-row {
    height: auto;
}

.mat-cell {
    padding: 0px 15px 15px 0;
}

That solution separates the columns, but the content, for example a date, is still in 3 different rows.

How can I solve this?

user4676340 · Accepted Answer · 2019-09-26 07:54:13Z

4

You can override the header cells CSS to force them to be one line :

table > thead > tr > th.mat-header-cell.cdk-column-position.mat-column-position {
  white-space: nowrap;
}

Try removing this line in the stackblitz and see what happens

answered Sep 26, 2019 at 7:54

user4676340

Sign up to request clarification or add additional context in comments.

Comments

Noshairwan Farooq · Accepted Answer · 2019-09-26 07:45:16Z

2

The columns auto adjust if you don't provide fixed width, i think the problem with your design is that the table does not has enough room to expand.

answered Sep 26, 2019 at 7:45

Noshairwan Farooq

1111 silver badge11 bronze badges

True, but there's a way