扩展 Angular 材质数据表标题行以匹配行内容宽度？答案

【问题标题】：Expanding the Angular Material Data Table Header Row to Match Row Content Width?扩展 Angular 材质数据表标题行以匹配行内容宽度？
【发布时间】：2020-01-05 21:51:33
【问题描述】：

In this stackblitz 带有滚动内容的粘性标题在仅查看初始视口时适用于行。

但是，当向右平移并滚动行时，它们会流过标题，因为标题不会展开。

此外，数据表行行不扩展通过视口宽度。我们如何解决这个问题？

Added a minimal demo inline in this question 使用纯 CSS 和 HTML。

这是mat-header-row 的 CSS：

    mat-footer-row, mat-header-row, mat-row {
        display: flex;
        border-width: 0;
        border-bottom-width: 1px;
        border-style: solid;
        align-items: center;
        box-sizing: border-box;
    }

它只会扩展到视口的宽度，因此当mat-header-cells 的总宽度大于视口时会溢出。

这是开发者控制台中mat-row 的屏幕截图。可以看出，该行只是视口的宽度，但该行的内容比视口宽得多：

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

您遇到这种情况是因为 .mat-header-row 没有获得您应用到 .mat-cell 的宽度增加

要解决，还需要将 200rem 宽度分配给这个类（在 styles.css 内）：

the .mat-cell ,.mat-header-row {
  min-width: 200rem;
}

fork 你的stackblitz with this change here

【讨论】：

如果有另一种情况它仍然无法正常工作，我认为这是因为标题是一个弹性框，所以我们必须使用弹性基础来设置最小宽度......我认为.. .我现在正在调查它...我看到的问题是mat-header-row仍然只是视口的宽度，所以mat-header-cells溢出到它的右边。我需要 mat-header-row 这是一个 flex 容器，以扩展到单元格的宽度。
stackoverflow.com/questions/57773529/…
在上面的 SO 帖子中，我放了一个纯 css 和 html 演示我所看到的。

角材料数据表的相关特征请求