如何调整 mat-table header 和行的高度？

Question

我正在构建一个 Angular 7 站点，并且有几个 mat-tables。它们看起来像这样：

模板：

<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>

样式表：

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

我想知道如何调整行高。

如您所知，mat-row (max-height: 10px) 上的内联样式不起作用。它也不适用于 mat-cell 样式。我也试过 height: 10px。我也试过mat-table.

的水平

如何在 mat-table（或其他样式）中设置行高和 headers 的样式。

谢谢。

Answer 1

正如我从 Angular Material 文档示例中看到的那样，mat-cells 有一些填充，请尝试将其删除或根据您的需要进行调整。此外，还有正常的 <tr></tr>、<th></th> 和 <td></td> 属性而不是 <mat-cell></mat-cell> 等

查看此页面 https://material.angular.io/components/table/overview

Answer 2

要调整行高，请使用以下样式：

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

如何调整 mat-table header 和行的高度？

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

angular

mat-table