Css 为角材质表设置固定的最小高度

我有一张这样的桌子

用户名
{{element.username}
电子邮件
{{element.email}

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

这是正确的：

这是它在最后一页上的外观：

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

一些环境信息：

• 角度11.0.4
• @角度/材料^11.2.0

---

使用

视图封装：无

实现此目的。在

td

中使用

class

属性

app.component.ts

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

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

.height {
  height: 50px;
}

app.component.html

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

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

.height {
  height: 50px;
}

工作

stackblitz

示例：

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

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

.height {
  height: 50px;
}

---

希望这有帮助：）

您可以简单地覆盖CSS for mat表，在组件CSS或样式中添加以下内容。CSS：

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

如果样式不适用，您可以添加

!；重要的

和

ng:deep

如下：

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

---

如果样式不适用，则需要检查正在应用到表中的CSS类，覆盖该类并调整高度。

这是否回答了您的问题@kvetis这并没有解决它，最后一页仍然被压缩，并且它没有填充它所拥有的全部空间调整css for mat table.mat table{height:specify the height；}仍然不起作用。表格的最后一页被压缩到1行的高度，我希望它与其他每一页的高度相同（即用户在paginator中选择的行数），现在检查stackblitz，我已经用paginator更新了它