我正在尝试提升 mat-table 中悬停的行,因此将高度更改为 <tr>
在悬停时,但作为阴影效果的高程未显示在行的底部,而是显示在行的顶部、左侧和右侧。
.html
<div class="mat-elevation-z2" #TABLE>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Required Columns... -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
(mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
</table>
</div>
.ts
mouseOverIndex = -1;
public onMouseOver(index) {
this.mouseOverIndex = index;
}
.css
.mat-row:hover {
cursor: pointer;
}
我在这里错过了什么?
我尝试使用“z24”、“z16”、“z8”等但没有用。
最佳答案
看起来行上的 background: inherit
覆盖了底部的阴影。
将以下内容添加到 CSS 将解决此问题。
[mat-row].remove-background {
background: none ;
}
然后将类应用于您的行。
<tr mat-row class="remove-background" (mouseover)="onMouseOver(e)"
堆栈 Blitz
https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css
关于css - 如何更改垫表中一行的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54626039/