How to adjust angular mat-table header height ? The table I am working on has column groups(main header and sub headers)

Question

I have used sample code from https://stackblitz.com/edit/angular-bklajw?file=app%2Ftable-basic-example.html. But the height property does not seem to work. Is there a way I can customize the height of the main header and subheader?

th.mat-header-cell, td.mat-cell {
    text-align: center;
    border: 1px solid #CCC;
    padding: 0 !important;
    height: 20px;
}

Answer 1

Your problem is not with the <td> elements but with the <tr> ones. just add this:

tr.mat-header-row{
   height: 20px !important;
 }