How to change Angular Material Table row height?

Question

In my Angular application (styled with Angular Material) I need to show some data using a Material Table.

This table has a sticky header, several rows and a sticky footer.

By default, rows have a height of 62.5px and I'd like to override this value.

How can I achieve that?

I have tried overriding the css style for tr / tr.mat-row / tr.mat-header-row etc, without success. I have tried using ::ng-deep too.

Also, my sticky footer row has a 48px height, which i didn't set!! Does anyone know whats happening?

Table picture

I'm able to edit the footer row css with ::ng-deep, i have set the font-weight to bold, but when i set the height attribute nothing happens.

::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}

Answer 1

Try adding it out on your styles.scss.

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}

Answer 2

To change the height by default (48 px) in mat-table you need to specify a class for every row in the html, for example, when you define the rows:

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

Then you can override the height, setting in your main css file the class 'table-row' with a specific height, for example:

.table-row {
  height: 30px !important;
}

We prove this with angular 7 and angular material version 7.3.7.

Regards

Answer 3

On a related point, I had an issue where my mat-table rows were too high, and tried to set the height in CSS to reduce it.

It turned out that the problem was "min-height" had been set on "mat-header-row" and "mat-row" somewhere deep inside material (not in my source code).

The fix was simply:

.mat-header-row, .mat-row {
  min-height: 30px;
}

Answer 4

With material 5

 mat-row.mat-row.ng-star-inserted 
  { height: 32px !important; } 

.mat-row{ min-height: 30px; }