Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to give fixed height to Angular Material Table

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

like image 861
Santhosh Avatar asked Aug 03 '18 14:08

Santhosh


1 Answers

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;
}
like image 181
wFitz Avatar answered Sep 20 '22 11:09

wFitz