antd中table hover上去的背景色样式修改

最新推荐文章于 2025-10-16 10:46:01 发布
原创 最新推荐文章于 2025-10-16 10:46:01 发布 · 6.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用CSS为`.ant-table`中的hover效果和固定列设置统一的背景色，提升用户体验。着重于`.ant-table-tbody`和`.ant-table-row-hover`的选择器应用。 
   .ant-table-tbody{
   	  > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
        background:#E5F2FF!important;
      }
   }
   .ant-table-fixed{
	.ant-table-row-hover, .ant-table-row-hover>td{
	    background: #E5F2FF!important;
	 }
	}
antd Vue 的表格变背景颜色 及 hover变颜色
范天缘的博客
07-14 1978
直接上代码，废话不多说 //table一级的颜色 .ant-table-tbody .ant-table-row-level-0{ background: #054672!important; } //table二级的颜色 .ant-table-tbody .ant-table-row-level-1{ background:#0F4D73!important; } //tablehover的颜色 .ant-table-tbody > tr:hover:not(.ant-table-e
记录————Antd组件库中Table组件，实现点击行数据，添加行背景高亮显示效果
ITSYDWJ的博客
11-01 1526
Table组件中行数据点击实现高亮效果 第一步：在state中定义是否添加样式标记值 constructor(props) { super(props); this.state = { rowActiveIndex: null, }; } 第二步： 向Table组件传递属性rowClassName及onRow，如下图： <StandardTable search={false} bordered={false} rowKey="serialNo
自定义ant-table背景色、鼠标悬浮行颜色，解决鼠标离开行“一闪而过”白色问题
最新发布
weixin_44090753的博客
10-16 125
将.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover改为想要的颜色important;
ant design table样式修改合集
热门推荐
Akukudeteng的博客
11-05 1万+
目录 1. 改变列头颜色 2. 修改选中某行时的文字颜色 常见问题合集： table的列数据排序，sorter无效不起作用？ 1. 改变列头颜色 代码部分： index.js: import styles from '../index.less'; index.less: :global(.ant-table-thead> tr >th) { color: royalblue; text-align: center...
完美解决 Ant design vue 鼠标悬浮在列表某一行改变颜色
xiaohua616的博客
05-06 2707
当鼠标悬浮在列表中的某一行时，改变当前行的背景颜色
antd组件库中table组件当前行:hover默认样式修改方法；
lin_uil的博客
05-12 961
在样式表中找不到 .ant-table-row:hover样式, 修改背景色之后,虽然成功了, 但是会先显示自己设置的颜色, 在恢复到默认样式,;(因为 :hover的默认样式会作用到td上, 我们只对tr进行:hover的样式修改, 渲染到td时,还是会恢复到默认颜色, )找到table的当前行类名, 添加 :hover;
antd-vue 使用table组件改变hover颜色
qq_52723324的博客
08-09 2638
在项目中遇到需要改变table的hover颜色，在使用深度的方法不行后，找到了这个方法。 解决方式： .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{ background:#2e3cd6; } ...
去除antd table hover 背景色
08-13
可以在全局样式文件（如 `index.css` 或 `App.css`）中添加以下 CSS 代码，以移除所有 Table 组件中行的 hover 背景色： ```css .ant-table-content table .ant-table tr:hover>td { background-color: ...
antd-table 取消hover
07-31
在Ant Design (antd) 的 Table 组件中，如果你想取消单元格的鼠标悬停效果（即取消 hover 状态），可以自定义单元格渲染组件，并覆盖默认的行为。通常，你可以通过 CSS 或者直接修改单元格组件的样式来达到这个目的...
antd table hover 高亮去除
08-16
在 `Table` 组件中，行悬停的高亮样式通常由 `.ant-table` 类下的 CSS 控制。具体地，`.ant-table tr:hover` 和 `.ant-table tr:active` 伪类定义了悬停和点击时的背景颜色。通过重写这些样式，可以禁用默认的高亮...
ant Design table表格 hover行样式修改
ling_kedu的博客
09-09 1万+
1.找到table表格，点击tr（序号1），然后再单击hover（序号2），使北京市固定显示 2.点击第一个td（序号3），保持hover状态，找到默认背景色 3.复制出 .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: #e6f7ff; } 4.然后css样式全局更改就可以了 ...
antd vue 自定义Table 行hover
weixin_43203545的博客
10-12 1388
antd vue 自定义Table 行hover
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
w319502537的博客
02-23 7160
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
ant Design table表格 hover行样式修改（也可解决hover修改后背景出现闪白的现象）
qq_56042158的博客
07-11 1145
1.找到table表格，点击tr（序号1），然后再单击hover（序号2），使背景色固定显示。2.点击第一个td（序号3），保持hover状态，找到默认背景色。4.将background改成你想要的颜色即可。
antd react table改变table中每一行hover样式
anchor_1的博客
08-08 1099
修改antd table样式
修改ant-design表格hover的颜色
weixin_41554281的博客
12-17 9295
这是最后的效果图。这个地方比较令人迷惑的地方是你以为它是一行的背景色。其实是每个单元格的背景色，但是背景色的改变是这一行hover的时候。 选中一行勾选hover状态，你发现背景色变了，但是却找不到对应的css样式。这个地方令我困惑了很久。差点以为有些样式可能不在浏览器中显示（这是个误区，请坚信所有的样式最终是要在浏览器中显示的）。然后去看子元素的时候，才恍然大悟。原来样式的改变在这里。...
React 给Table行添加hover样式 点击某行按钮给该行添加样式
weixin_44233592的博客
12-23 2132
1.antd Table中鼠标移动，给行添加hover样式 :global(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td) { background: #e6f7ff; } 注意：在global外面要包裹一个className，不然就是给全局的进行添加了，而不是本页面的。 2.点击Table中某一行中的按钮，给该行添加样式
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值