Antd 表格样式修改

写一下最近使用Antd表格遇到的问题,如果遇到以下问题可以参考  (antd版本为3.16.3)

修改表头、列表文字和背景颜色
去掉（修改）鼠标移到某行时的背景
修改选中某行时的文字颜色
设置奇偶行不同背景

看下table的标签，不同配置下有所不同但是主要标签都是相同的，像ant-table-thead代表表头ant-table-tbody代表列表内容。

我在覆盖antd样式时一般通过外联CSS修改，这样有时碰见因为外联样式优先级较低无法覆盖antd样式的情况，使用!important提高优先级解决。

十分建议覆盖antd样式前先限制样式作用范围，避免修改其他antd组件样式

修改表头、列表文字和背景颜色

          //修改表头文字、背景颜色  .ant-table-thead > tr > td{color: white;background: #3071b9 !important;}//修改列表文字、背景颜色  .ant-table-tbody > tr > td{color: white;background: #3071b9 !important;}

去掉（修改）鼠标移到某行时的背景

          //在鼠标悬浮时背景色展示在当前项非当前行.ant-table-tbody > tr > td {background: rgba(255,255,255,0) !important;}.ant-table-tbody > tr > td:hover{background: rgb(255,255,255) !important;}//去除鼠标悬浮的背景色  .ant-table-tbody > tr > td {background: rgba(255,255,255,0) !important;}.ant-table-tbody > tr > td:hover{background: rgba(255,255,255,0) !important;}

修改选中某行时的文字颜色

onRow是table提供的属性，不知道的小伙伴可以去看下官方文档哦

onRow={(record, index) => {return {onClick: (e) => {let tr = e.target.parentNode; //拿到tr标签if (tr.nodeName !== 'TR') {tr = tr.parentNode}//给所有tr标签设置颜色for (let i = 0; i < tr.parentNode.childNodes.length; i++) {tr.parentNode.childNodes[i].style.color = 'white'}//单独设置被选中的标签颜色tr.style.color = "rgb(115,201,236)";},};
}}

if (tr.nodeName !== 'TR') {
tr = tr.parentNode
}

这个判断是因为在你设置表格中的元素不是文本而是你添加的标签的时候，你使用e.target.parentNode拿到的是你添加的标签，所以这里做了这样的判断。当然你表格中单纯是文本不需要添加这段代码。

设置奇偶行不同背景

rowClassName 也是table提供的属性，这里通过检查当前行是奇数还是偶数分别使用不同的类型，在对不同类名使用不同的背景色。

rowClassName = {(record, index) => {let className = index % 2 ? 'shallow_gray': 'deep_gray';return className
}}

Antd 表格样式修改相关推荐

vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
antd table 样式修改
.ant-table-wrapper {width: 98%;height: 100%;position: relative;top: 30px; } .ant-table {background-c ...
React AntD 表格查看修改时默认选中几行数据
hook定义selectedRowKeys const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRow ...
MarkDownPad 2 表格样式修改
在markdownpad2里写一个表格,处理器用了markdown扩展预览边框太难看了,找了半天都没有解决方法,但是网上教程的表格都是下图这种的,请问如何才能不改html才能达到下图这种边框的效就 ...
Antd a-menu 样式修改
必须加一层div包裹才有效!!!! #top {//悬浮,选择颜色:deep(.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item :h ...
修改表格字体颜色_word排版应用：如何创建文本样式和表格样式
样式,大家应该不陌生,在Word中是一个非常强大的功能,运用得好,可以节省很多时间和精力.但如果你不会用,关键时刻可以把你急哭了! 在前面的"Word样式,简单又实用!"和&quo ...
React Antd中样式的修改
如果需要对antd的样式进行修改, 进入你要修改的页面注意:不能直接在自己的文件下面,加入一个css,修改这个class的样式,应该加入global限定,global {} , 在{}里面写入 . ...
Word中怎么批量修改所有表格样式
适用于在有很多表格的时候,想一次性修改所有表格的样式. 比如说,我这里有3张表格: 怎么做呢 1.先把开发工具菜单调出来,开发工具菜单默认情况下不在WORD中菜单栏显示,需要自己调. 文件 > ...
vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~
前言在用vue框架进行开发的时候,使用现成的UI组件库是十分方便的,但方便归方便,现成的它仍然不能满足我们所有的需求,为了达到预期的效果,我们仍需加以修改其样式,这里我采用的是将重写样式放入一个le ...