antd~design 的 table 行背景变颜色改变以及 hover 时改变

antd table组件提供了一个 rowClassName 属性 是来给行添加类名的,就可以设置上行的背景颜色了。

但是这个问题有个缺点就是,在hover行上面的时候还是会变成 ‘白’ 色的背景,这种情况就得添加 css 的伪类选择器了 :hover 代码如下

.blue, .blue:hover > td {
    background-color: blue;
}

添加后,你还会发现还有一个问题,就是hover上面的时候,会闪动下白色背景。

还可以再设置下

.ant-table-tbody > .blue > td {
    background-color: blue;
}

这样就解决问题了,原谅我有点废话 完整代码如下:

.ant-table-tbody > .blue > td {
    background-color: blue;
}

.blue, .blue:hover > td {
    background-color: blue;
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐