Search code examples
cssangularangular-material

How to change Angular Material Table row height?

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;
}
Solution

  • Try adding it out on your styles.scss. 

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