Question

在我的Angular应用程序（使用Angular Material样式化）中，我需要使用Material Table显示一些数据。

此表有一个标头，几行和一个页脚。

默认情况下，行的高度为62.5像素，我想覆盖此值。

我该如何实现？

我尝试覆盖tr / tr.mat-row / tr.mat-header-row等的CSS样式，但没有成功。我也尝试过使用:: ng-deep。

另外，我的脚注行高度为48px，我没有设置！有人知道发生了什么事吗？

我可以使用:: ng-deep编辑页脚行CSS，我将font-weight设置为 bold ，但是当我设置height属性时，什么都没有发生。

::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}

谢谢！

Answer 1

要默认更改mat-table中的高度（48像素），您需要为html中的每一行指定一个类，例如，在定义行时：

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

然后，您可以覆盖高度，在主css文件中设置具有特定高度的类“ table-row”，例如：

.table-row {
  height: 30px !important;
}

我们用角7和角材料版本7.3.7证明了这一点。

致谢

Answer 2

您还可以在模板的 mat-row 元素中将其设置为一个精确值。

使用 minHeight 比使用 height 更好，因为它会覆盖默认的 css。

<mat-row
    matRipple
    *matRowDef="let row; columns: columnNames"
    routerLinkActive="highlighted"
    [style.minHeight.px]="100">
</mat-row>

Answer 3

您可以在DR.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(@NonNull DataSnapshot dataSnapshot) { for (DataSnapshot d: ds.getChildren()) { //below line may cause null pointer Exception String Height = d.getKey() + d.getValue() + "\n".toString(); if(d.child("1Height:").getValue()!=null){ String ch = d.child("1Height:").getValue(String.class); //tv.append(Height); tv.append(ch);} } } } @Override public void onCancelled(@NonNull DatabaseError databaseError) { } });中指定表格页脚的高度。

tr.mat-footer-row

这是StackBlitz示例https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css

Answer 4

尝试将其添加到您的styles.scss中。

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}

Answer 5

它正常工作。

tr.mat-footer-row,
tr.mat-row {
  border: 1px solid #e7e7e7;
  font-weight: bold;
  height: 20px !important;
}

Answer 6

与此相关的是，我遇到一个问题，即我的垫子表行太高，并试图在CSS中设置高度以减小它。

事实证明，问题是在材料深处的“ mat-header-row”和“ mat-row”上设置了“最小高度”（不在我的源代码中）。

解决方法很简单：

.mat-header-row, .mat-row {
  min-height: 30px;
}

Answer 7

使用材料5

 mat-row.mat-row.ng-star-inserted 
  { height: 32px !important; } 

.mat-row{ min-height: 30px; }

Answer 8

答案是正确的，但如果它对您不起作用，则可能意味着您在表中具有设置了高度的div或任何元素，并且如果该高度大于行高度，则您将赢得无法覆盖它。

Answer 9

我遇到了类似的问题；在我的例子中，表格的高度相对于行数来说太大了，所以设置高度不起作用。当我在行数较少的情况下将高度调整为较小时，我能够再次设置高度。

如何更改角材料表的行高？

9 个答案: