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?

score 2 · Answer 1 · answered Sep 26 '19 at 07:54

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

score 1 · Accepted Answer · answered Sep 26 '19 at 07:45

1

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 '19 at 07:45

Noshairwan Farooq

2 Answers2