角材料列宽适合内容？

Question

这是我实际的Angular Material表：

  

我希望列宽适合内容，以便标题   并且行内容占据一行。

尝试通过以下方式添加填充和边距：

.mat-row {
    height: auto;
}

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

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

任何有关如何解决此问题的建议将不胜感激。

Answer 1

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

Answer 2

您可以覆盖标题单元格CSS，以将其强制为一行：

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;
}

尝试删除堆栈闪电中的这一行，看看会发生什么