角度材质表大小/滚动

Question

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

请参阅此StackBlitz项目。 https://stackblitz.com/edit/angular-r6xdgk使用底部的滚动条，您会看到奇怪的格式。

提前感谢您的帮助！

Answer 1

添加

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

到app.component.css修复顶部栏。 底部需要类似的造型。您不能使用宽度：100％，因为它在技术上不在桌面之内。所以它无法自动获取宽度。

Answer 2

我希望这对其他人能够根据单元格内容为横向添加到mat-table和column width有所帮助。

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

Answer 3

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

如果这听起来很明显，如果它们是混合单位，您是否考虑过使用 calc :

为我工作。

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

Answer 4

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

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

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

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

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