为角料表设置固定的最小高度答案

【问题标题】：Set a fixed minimum height for angular material table为角料表设置固定的最小高度
【发布时间】：2021-03-01 20:55:18
【问题描述】：

我有一张这样的桌子

<table mat-table class="mat-elevation-z8 w-full" [dataSource]="dataSource">
    <!-- Username Column -->
    <ng-container matColumnDef="username">
        <th mat-header-cell *matHeaderCellDef>Username</th>
        <td mat-cell *matCellDef="let element">{{element.username}}</td>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef>Email</th>
        <td mat-cell *matCellDef="let element">{{element.email}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [length]="count" showFirstLastButtons></mat-paginator>

它工作得非常好，除了当我转到最后一页时，对象的数量少于每页的对象，因为那时表格的高度会缩小。

这是正确的：

这是它在最后一页上的样子：

我希望高度相同。因此，它只需填写空行，直到它与其他所有页面的高度相同。我该怎么做？

一些环境信息：

Angular 11.0.4
@angular/material ^11.2.0

【问题讨论】：

这能回答你的问题吗？ CSS display: table min-height not working
@kvetis 这并不能解决问题，最后一页仍然被压缩，并且没有填满它拥有的整个空间
调整mat-table的css .mat-table { height: 指定高度； }
stackblitz.com/edit/…

标签： css angular angular-material

【解决方案1】：

使用ViewEncapsulation: None 来实现这一点。在td 中使用class 属性

app.component.ts

@Component({
  selector: "app",
  styleUrls: ["app.component.css"],
  templateUrl: "app.component.html",
  encapsulation: ViewEncapsulation.None
})

app.component.html

<table mat-table class="mat-elevation-z8 w-full" [dataSource]="dataSource">
    <!-- Username Column -->
    <ng-container matColumnDef="username">
        <th mat-header-cell *matHeaderCellDef>Username</th>
        <td mat-cell *matCellDef="let element" class="height">{{element.username}}</td>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef>Email</th>
        <td mat-cell *matCellDef="let element" class="height">{{element.email}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [length]="count" showFirstLastButtons></mat-paginator>

app.component.css

.height {
  height: 50px;
}

工作 stackblitz 示例： https://stackblitz.com/edit/angular-uf1sdt?file=src/app/table-multiple-header-footer-example.css

希望这会有所帮助:)

【讨论】：

还是不行。表格的最后一页被压缩到 1 行的高度，因为我希望它与其他所有页面的高度相同（即用户在分页器中选择的行数）
现在检查 stackblitz 我已经用 paginator 更新了它

【解决方案2】：

您可以简单地覆盖 mat-table 的 CSS，在组件 CSS 或 style.css 中添加以下内容：

.mat-table {
 height: /*specify the height;*/ 
}

如果样式不适用，您可以添加&#33;imporatant 和ng:deep，如下所示：

::ng-deep.mat-table {
 height: 500px !important;/ 
}

Stackblitz

如果样式不适用，那么您需要检查应用于表格的 CSS 类并覆盖该类并调整高度。

【讨论】：