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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐