angular - 角材料表尺寸/滚动

Question

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

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

提前感谢您的帮助！

标签： angularangular-material

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