How to give fixed height to Angular Material Table

Question

I have an angular material table(10 rows)for which i want to fix the height to 300px(Vertical scroll should be used to see the extra rows). When i give height in the styles to 300px it is not having any effect. The contents of the table are going out of the height given.

See the link for the image.

I want to have two tables one below another and i want to give them equal height 50%. The first table itself taking 10 rows height.

Angular Material Table

Answer 1

I use a wrapper div with class

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

and this is the class

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

Answer 2

Try this one in css file

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