How to change Angular Material Table row height?

10
votes

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;
}
9
cssangularangular-material
Try overriding the height with !important flag - Sourav Dutta
You can also specify this import { ViewEncapsulation } from '@angular/core'; // ... @Component({ // ... encapsulation: ViewEncapsulation.None, }) on your component this will override styles ! - Sourav Dutta
The solution to ViewEncapsulation was to override very specific css using highly specific css selectors in 1) global css or 2) creating separate style files for certain views / styles / elements, importing into every component required (e.g. styleUrls: [material-table-override.css, component.css]). - Sourav Dutta

9 Answers

8
votes

Try adding it out on your styles.scss. 

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

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;
}
5
votes

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

3
votes

With material 5

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

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

You can also set it in the mat-row element in the template to an exact value.

Using minHeight is better than height because it overrides the default css.

<mat-row
    matRipple
    *matRowDef="let row; columns: columnNames"
    routerLinkActive="highlighted"
    [style.minHeight.px]="100">
</mat-row>
1
votes

It works correctly.

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

You could specify the height of the table footer in tr.mat-footer-row. 

tr.mat-footer-row {
    height: 100px;
}

Here is StackBlitz example https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css

0
votes

The answers are correct but if it doesn't work for you, it probably means you have a div or any element inside the table that has a height set to it, and if this height is greater than the row height you won't be able to override it.

0
votes

I had a similar problem; in my case, the height of the table was too large relative to the number of rows, so setting the height didn't work. When I adjusted the height to be smaller when I had fewer rows, I was able to set the height again.