Angular Material Tableに固定高さを与える方法

Question

私は高さを300pxに修正したいangular material table(10 rows)を持っています（余分な行を見るには垂直スクロールを使用する必要があります）。スタイルの高さを300pxに指定しても、効果はありません。テーブルの内容が指定された高さから外れています。

画像のリンクをご覧ください。

上下に2つのテーブルがあり、それらに等しいheight 50%.を与えたいです。最初のテーブル自体は10 rows heightを取ります。

角度材料テーブル

Answer 1

クラスでラッパーdivを使用します

<div class="table-container">
   <table mat-table [dataSource]=.....>
   </table>
</div>

これはクラスです

.table-container {
  margin-top: 10px;
  max-height: 300px;
  overflow: auto;
}

Answer 2

CSSファイルでこれを試してください

table tr.mat-row {
  height: 300px;
}