Angular-Mat-Table: 只显示 n 行的 table - 如果超过滚动条

Question

有没有办法只显示例如mat-table 的 5 行，如果 table 超过 5 行，它将显示为可滚动？

如果我从 Angular Material Tables 中提取样本，它会显示 10 个项目（=行）。如何将输出限制为上述 5 行而不是开始滚动？

背景：我需要将 mat-table 放在 mat-tab 元素上。不同的窗格在高度上略有不同。 table 可以有任意数量的行。因为我知道对于适当的布局只有 4（或可能 5）行适合我想限制 table.

的总高度

我找到了解决方案但没有找到正确应用 overflow 和 display 属性的方法。

Answer 1

将 table 包裹在 div 中并添加 max-height: 248px 和 overflow: auto。

例子

<div style="max-height: 248px; overflow: auto">
<table mat-table [dataSource]="dataSource">
  ...
</table>
</div>

为什么 max-height 和 248px 一样？
因为table数据的行高是48所以
48px（每行）* 4（行）= 192px + 56（Table header) = 248px

Anuglar-Mat-Table: Display only n rows of a table - if more than with scrollbar