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

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

https://stackblitz.com/edit/angular-sae9ln?file=styles.css

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