角材料表尺寸/滚动

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

Answer 2

加

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

到app.component.css修复顶部栏。底部将需要类似的样式。您不能使用width：100％，因为它在技术上不在表格之内。因此它不能自动拾取宽度。