Angular Material 列宽适合内容？

Question

这是我的实际 Angular Material table:

我希望列宽适合内容，这样 header 并且行内容占一行。

尝试添加填充和边距：

.mat-row {
    height: auto;
}

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

该解决方案将列分开，但内容（例如日期）仍位于 3 个不同的行中。

我该如何解决这个问题？

Answer 1

如果您不提供固定宽度，列会自动调整，我认为您的设计存在问题 table 没有足够的空间展开。

Answer 2

您可以覆盖 header 个单元格 CSS 以强制它们成为一行：

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

尝试在 stackblitz 中删除这一行，看看会发生什么

Angular Material column width fit content?