如何修改antd中表格的表头样式和奇偶行颜色交替
在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢?
这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色

定义好表头的颜色之后,在表格中需要奇偶行的颜色不一样类似于下面的这种

可以用下面的方式定义行的样式:

在table中加上rowClassName,rowClassName是表格行的类名,接受两个参数,其中index表示第几行,这里
的行数不包括表头,然后做一下判断,奇偶行给不同的样式就可以了
如何修改antd中表格的表头样式和奇偶行颜色交替的更多相关文章
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性?
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- table中嵌套table,如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
- CKEDITOR 4.6.X 版本 插件 弹出对话框 Dialog中 表格 Table 自定义样式Style 问题
项目开发过程中,发现CKEDITOR 插件的弹出框 内 如果跟据项目需要写表格(table tr td),表格的边框等属性会被 CKEDITOR的清除或覆盖,导致表格很难看. 问题关键: 插件弹出框d ...
- 修改EsayUi 中 tree 的原有样式,变为according 之类的样式 ,且子菜单显示在右侧
easyUi 中 tree 框架的属性有: 修改原有展开样式代码如下: onExpand:function(node,param){ $(this).children("li"). ...
- js实现自定义修改网页中表格信息
项目中的打印页面,为提高用户体验,需要增自定修改表格内容的功能,以下是使用示意图(双击td标签部分的内容,可自定义修改): 以下是js插件源码,存为edit.js文件: var tbl, tbt; v ...
- 修改 页面中默认的select样式
select样式定制: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择 ...
- elementUI 表格设置表头样式
eader-row-class-name 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className. Function({row, rowIndex}) ...
- 修改laravel中的pagination的样式
运行如下命令,拷贝出pagination样式到public/vendor目录下, 然后在pagination实例上调用links(‘传路径’)方法 使用起来非常方便,同时也可以自定义样式
随机推荐
- $.ready和onload 区别
1.jq ready()的方法就是Dom Ready 他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作. 一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css ...
- Restful和WeBAPI学习笔记
1.restful是基于无状态的,所谓无状态就是说客户端和服务端的每次通话都是独立的,不存在session和cookie之类的保存状态的机制,基于该协议可实现简单的curd操作, 其操作分为get\p ...
- (转载)jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...
- Python学习环境搭建——VMware,Ubuntu,Anaconda,Pycharm
1.安装VMware虚拟机,版本是14.1.2(含注册码) 链接:https://pan.baidu.com/s/1ffNLONDjEMYDAenE36gRpA 密码:yazx 注:我的电脑分辨率较高 ...
- 使用Serilog输出到ES(使用笔记)
第一步:安装Serilog 使用NuGet包安装以下组件: Serilog.AspNetCoreSerilog.Settings.ConfigurationSerilog.Sinks.ConsoleS ...
- 【CodeForces-1041C】Coffee Break(二分解决关于set,pair,upper_bound用法)
//题意:一个的工作时间是m分钟. // 在特定的时间和咖啡 n a1,a2....an,, ai代表的是每个咖啡要在一天中对应的时间点喝掉 // 每一次喝咖啡的时间为1分钟 // 必须在一天中的ai ...
- mysql删除表中的记录
大家都知道,在MySQL中删除一个表中的记录有两种方法,一种是DELETE FROM TABLENAME WHERE... , 还有一种是TRUNCATE TABLE TABLENAME. DELET ...
- python-模拟掷骰子,两个筛子数据可视化
""" 作者:zxj 功能:模拟掷骰子,两个筛子数据可视化 版本:3.0 日期:19/3/24 """ import random impo ...
- sync命令详解
转:https://blog.csdn.net/everything1209/article/details/50423679 1.谁和谁同步? 2.为什么要同步?复制移动的过程不是同步的吗,都发生了 ...
- react-native ListView 性能问题
常见性能问题已经有很多答案,这里要说的是使用ListView时注意的地方, ListView的容器需要设定一个固定高度, 不然ListView中的item过多,会把整体页面撑开,设置的 remo ...