Height of angular-material table not going below certain minimum height

Question

I am using mat-table in my project and would like to set the height of the rows to something like 20-30px.

When I set height: 25px what I get is actual height of 47.8px and if I set the height to something greater than 47.8px the row height increases, which means it's not a problem with css selectors and specificity.

I'm using the directive like so:

<table mat-table [dataSource]="dataSource" [ngClass]="classes"></table>

In my css I have:

.mat-cell, .mat-header-cell {
  padding: 0 10px;
  height: 25px;
}

I have checked and there doesn't appear to be a min-height attribute set anywhere.

Answer 1

You need to do:

.mat-row {
  height: 25px;
}

Here you can see a stackblitz demo .