Angular Material 表 Sizing/Scroll

Question

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

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

在此先感谢您的帮助!

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