In my table I have the class green-row
, but the problem is whenever I hovered on a green row it turned into black for a second and then removes the background color and becomes white.
I've tried different options but all of them giving the background color for a second and then gets removed, neither black or green
<nz-table #filterTable [nzData]="agents$ | async"><thead><tr>
<ng-container *ngFor="let column of columns"><th *ngIf="column.status" (click)="sortByColumn(column)">{{ column.name }}</th></ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of filterTable.data"[ngClass]="{'green-row': data.in_targets === true}">
<td [nzLeft]="fixedColumn" class="center">
<label nz-checkbox [ngModel]="data.checked" (change)="updateCheckedList(data)">
</label>
</td>
<ng-container *ngFor="let column of columns;let i= index">
<ng-container *ngIf="column.status">
<td [class.red]=" data[column.dbName] |negative"
[ngClass]="{'text-center':column.right,'text-capitalize':column.type==='text'}">
<td class="text-right" *ngIf="columns[10].status">{{ data.yrchange | currency : 'USD' : 'symbol' : '1.0-0'}}
</td>
</tr>
</tbody>
</nz-table>
and the css is
.green-row {
background-color: lightgreen;
}
.green-row:hover{
background-color: black;
}
but problem is whenever i hovered on green row it turned into black for a seconds then remove bg color and becomes white , tried different options but all of them giving the bg color for a seconds and then remove , neither balck or green
Hover color is arising from styling on the TD
tags, you can just override the styles by using !important
, Please find below working example for the same!
.green-row {
background-color: lightgreen !important;
}
.green-row td {
background-color: lightgreen !important;
}
.green-row:hover {
background-color: black !important;
}
.green-row:hover td {
background-color: black !important;
}