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?

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