角材料表尺寸/滚动答案

【问题标题】：Angular Material table Sizing/Scroll角材料表尺寸/滚动
【发布时间】：2018-06-12 19:37:37
【问题描述】：

我有一个包含许多列的 Angular Material 表。它比屏幕宽。当我滚动时，表格行会超出表格容器的边缘。

查看这个 StackBlitz 项目。 https://stackblitz.com/edit/angular-r6xdgk使用底部的滚动条，你会看到奇怪的格式。

提前感谢您的帮助！

【问题讨论】：

【解决方案1】：

我希望这将有助于其他人根据单元格内容将水平滚动添加到 mat-table 和列宽。

.mat-table {
  overflow-x: scroll;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

【讨论】：

太棒了。它完美地工作。接受的答案对我不起作用。
这节省了我的时间，问题中的其他许多答案都没有对我有用
神奇的sn-p！

【解决方案2】：

添加

.example-container {
  overflow-x: scroll;
}

到 app.component.css 修复顶栏。底部将需要类似的样式。您不能使用 width:100% 因为它在技术上不在表格中。所以它不能自动拾取宽度。

【讨论】：

【解决方案3】：

我希望这也可以帮助其他人处理 mat-table 行的宽度。

在此示例中：https://material.angular.io/components/table/examples#table-sticky-complex-flex 为 mat-rows 设置了一个以 px 为单位的固定值的最小宽度。

为避免必须这样做，您可以使用：

.mat-row {
  min-width: max-content;
}

这将计算行的内容宽度，而不必对每个列的宽度求和。这将在整个滚动区域中保持 mat-row 的样式。

【讨论】：

【解决方案4】：

如果您知道单元格的宽度，则将它们全部加起来并将其设置为表格的宽度。

如果这听起来很明显，您是否考虑过在混合单位中使用 calc：

为我工作。

注意：我设置了min-width，所以如果表格小于页面的宽度，它仍然可以与其他 flex 设置一起使用。

【讨论】：