CODEWITHSUNDEEP
angularmat-table
gib65
gib65

Reputation: 2017

How do you adjust the height of mat-table header and rows?

I'm building an Angular 7 site and I have a couple of mat-tables. They look like this:

enter image description here

The template:

<div style="width: 100%; height: 100%; overflow-y: scroll;">
    <mat-table [dataSource]="projects">
        <ng-container matColumnDef="projectName">
            <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
            <mat-cell *matCellDef="let project">{{ project.name }}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="endDate">
            <mat-header-cell *matHeaderCellDef>End Date</mat-header-cell>
            <mat-cell *matCellDef="let project">{{ project.endDate }}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="overdueTodos">
            <mat-header-cell *matHeaderCellDef>Overdue Todos</mat-header-cell>
            <mat-cell *matCellDef="let project">{{ project.overdueTodos }}</mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let project; columns: displayedColumns;" style="background-color: green; padding: 0; margin: 0; max-height: 10px;"></mat-row>
    </mat-table>
</div>

The stylesheet:

mat-cell {
    font-size: 8pt;
    max-height: 10px;
}

I'm wondering how to adjust the height of the rows.

As you can tell, the inline styling on the mat-row (max-height: 10px) doesn't work. Neither does it work in the mat-cell styling. I also tried just height: 10px. I also tried at the level of the mat-table.

How does one style the height of rows and headers in a mat-table (or other styling for that matter).

Thanks.

Upvotes: 1

Views: 11301

Answers (2)

Eslam Sameh Ahmed
Eslam Sameh Ahmed

Reputation: 4022

To adjust rows height use the following style:

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

Upvotes: 2

igor_c
igor_c

Reputation: 1250

As I can see from the Angular Material documentation examples, mat-cells have some padding, try to remove it or adjust it to your needs. Also, there're normal <tr></tr>, <th></th> and <td></td> with attributes instead of <mat-cell></mat-cell> etc.

Check out this page https://material.angular.io/components/table/overview

Upvotes: 0

Related Questions