mat-table: change height of rows (mat-row) and cells (mat-cell) to 52px

[ryan-neufeld]

Bug, feature request, or proposal:

Change height of a row (mat-row)/cell (mat-cell) to 52px (51px + 1px bottom border)

What is the expected behavior?

Material Designs Guidelines show the height of a row as 52px OR (51px + 1px top border) upon inspecting the code of the material components for the web example

What is the current behavior?

Currently, inside of mat-table, mat-row seems to show a height of 48px with no padding or border and mat-cell shows a height of 47px + 1px bottom border

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://stackblitz.com/angular/vjavnrpqeyj?file=src%2Fapp%2Ftable-basic-example.html

Open inspect element on any example of mat-table and find mat-row + mat-cell for an example.

What is the use-case or motivation for changing an existing behavior?

Consistency across Material Design implementations.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All.

Is there anything else we should know?

N/A.

[beberhard]

I'm having the same issue, I'm needing a smaller height to get a more compact table view.
The table is an outcome of a markdown, which I styled to get the row height to a less number. If created and displayed in a card view, therefore I need the more compact row height it works fine. But, if I then switch to a page where the mat-table, mat-row show a height of 48px with no padding or border and mat-cell shows a height of 47px + 1px bottom border and then sitch back to my card view, the compact row height is overwritten.
That's how it should look and how it looks after switching as describe above.

[Hasintha-git]

Use this on your style.css

      .mat-row{
        height: 10px !important;
      }

[rajeshtarte]

try this
.mat-mdc-row{
height: 10px !important;
}