如何修改Bootstrap Table中table-striped的颜色

最新推荐文章于 2022-11-05 15:19:41 发布
最新推荐文章于 2022-11-05 15:19:41 发布
阅读量1.7w 收藏 11
点赞数 1
分类专栏： 前端 文章标签： css bootstrap table table-striped
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhning12L/article/details/80746172
版权

table-striped可以使table每一行颜色不同，但是如果不想用默认的，想自己自定义颜色该怎么写呢

只需要在自己的css里面写上：

.table-striped > tbody > tr:nth-child(2n+1) > td, 
.table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: rgb(242, 245, 247);//此处是自己想用的颜色
 }

上面的2n+1可以改成odd或者even

沐婉清
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap table配置参数例子
01-19
bootstrap-table的一些配置参数： $('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: json, striped: true, //使表格带有条纹 pagination: true, //在表格底部显示分页工具栏 pageSize: 22, pageNumber: 1, pageList: [10, 20, 50, 100, 200, 500], idField: ProductId, //标识哪个字段为id主键 showTogg
Bootstrap table表格简单操作
12-12
Bootstrap table表格简单实例分享给大家，供大家参考，具体内容如下 使用类 Class=”table” 既可让table美化样式  table 相关的Class 隔行换色 ： table-striped 鼠标悬停效果： table-hover 表格的边框：table-...
bootstrap表格通过css样式实现隔行换色
不言而喻i的博客
01-09 7777
代码样式如下 table tr:nth-child(even){ background: #ccc; }
Bootstrap颜色对应对照表
大话家的博客
08-08 1万+
Bootstrap自带颜色：class = "bg-xxx" bg-red 红色 bg-yellow 黄色 bg-aqua 湖绿色 bg-blue 蓝色 bg-light-blue 浅蓝色 bg-green 绿色 bg-navy 藏青色 bg-teal 青色 ...
如何给bootstrap table设置行列单元格样式
热门推荐
uncle_yiba的博客
08-16 3万+
1、根据单元格或者行内其他单元格的内容，给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center", formatter:function(value, row, index){ return index+1; }, cellStyle:{ css:{ "background-c
Bootstrap 基础CSS - 表格（Tables） .table-striped
u014704496的专栏
12-02 1万+
table-striped可以使奇数行的背景设为灰色。   table class="table table-striped">    …  table>
bootstrap table自定义隔行颜色
qq_65970232的博客
05-09 776
在给table加上striped属性后，它其实是生效了的，只是其默认的css颜色为白色。我们只需自定义一个css文件，里面写： .table-striped>tbody>tr:nth-of-type(odd){background-color:#你要的颜色;} 然后在需要的页面引入就能使用了。 效果如下: ......
BootStrap table 自定义变色
zcaixx的博客
11-23 1273
在css中 .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: rgb(242, 245, 247);//此处是自己想用的颜色 } 对于jq中想要变色，会发现，t...
Bootstrap-1 表格样式
梦琪96的博客
01-18 778
Bootstrap表格样式分类 基础样式.table 带背条纹表格.table-striped 带边框.table-border 悬停.table-hover 紧凑.table-condensed 行样式 .active .success .info 响应式表格 操作步骤 在桌面新建一个文件夹作为站点来存放页面，以“我的站点”为文件名。（文件名自己随意写） 使用DW软件新建站点，站点位置...
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1192
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9137
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
bootstrap table表格插件使用详解
01-19
$table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, ...
bootstrap Table的一些小操作
01-19
本文实例为大家分享了bootstrap Table的操作代码，供大家参考，具体内容如下 function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） ...
Bootstrap table两种分页示例
11-27
$('#test-table').bootstrapTable({ //请求方法 method: 'get', //是否显示行间隔色 striped: true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） cache: false, //是否显示分页...
jQuery向某个元素中添加元素
沐沐
11-27 7507
写网页的时候，需要读取后端数据然后作为一个元素写进前端页面，所以就用了jQuery来完成这个功能。添加新的 HTML 内容 用于添加新内容的四个 jQuery 方法：append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 这里我使用的是通过append（） 向框架的
angularjs 滚动条 angular-scroll插件
沐沐
06-09 6261
超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 使用缘由： 在进行网页开发时，导航栏想做成能够随着页面滚动条距浏览器上下距离来调整状态的样式，所以进行了探索。 但是网上获取滚动条scroll以及对其进行操作的方法，多数为jQuery以及javascript，但是项目使用的是angularjs，如果和jQuery混写可能会出现问题，所以自...
html页面的滚动和导航栏的固定——Bootstrap的Affix和ScrollSpy
沐沐
06-15 2676
Bootstrap的Affix与ScrollSpy用法[一] Bootstrap Affix Plugin(Advanced)
2019校招 前端面试题总结
沐沐
08-29 2234
网易互联网 深拷贝与浅拷贝，如何实现一个对象的深拷贝 有一个数组，里面含有多个对象，如： [{id:1,name:xxx,score:68},{id:2,name:xxx,score:89},…,{id:n,name:xxx,score:45}] 将这个数组按照score的大小顺序排列 http协议有几个层，分别是什么，每一层上具体有什么 TCP和UDP的区别 Post和Get方法的区别 ...
bootstrap table-striped
最新发布
06-06
Bootstrap table-striped 是一个 Bootstrap 框架提供的表格样式类，用于为表格的每一行设置交替的背景颜色。它可以使表格更加美观和易于阅读。在使用时，只需要在表格的 class 属性中添加 table-striped 即可。例如： ``` <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> ``` 这样就可以为表格的每一行设置交替的背景颜色了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值