nz-table行hover效果异常：green-row hover后闪黑变白

问题原因 #

nz-table自带的默认hover样式优先级高于你自定义的.green-row:hover，同时模板中存在未闭合的DOM标签，导致样式渲染异常，最终出现hover时先闪黑再变白的现象。

修复步骤 #

1. 修正模板DOM结构错误 #

你的模板里存在未闭合的<td>标签，会打乱DOM结构，影响样式渲染。找到这段代码：

<td [class.red]=" data[column.dbName] |negative"
[ngClass]="{'text-center':column.right,'text-capitalize':column.type==='text'}">

补充闭合标签并完善内容渲染：

<td [class.red]="data[column.dbName] | negative"
    [ngClass]="{'text-center': column.right, 'text-capitalize': column.type === 'text'}">
    {{ data[column.dbName] }}
</td>

2. 提升自定义样式优先级 #

使用更具体的选择器覆盖nz-table默认hover样式，修改CSS代码如下：

/* 自定义行默认背景色 */
nz-table tbody tr.green-row {
    background-color: lightgreen;
}

/* 覆盖行及单元格的hover样式 */
nz-table tbody tr.green-row:hover,
nz-table tbody tr.green-row:hover td {
    background-color: black;
    color: white; /* 可选：让文字在黑色背景上更清晰 */
}

原理说明 #

nz-table默认会给tbody tr:hover和tbody tr:hover td设置背景色，通过nz-table tbody tr.green-row:hover这种更具体的选择器，能让自定义样式优先级超过默认样式，避免被覆盖。

内容的提问来源于stack exchange，提问作者Asra Fatima