bootstrap table隔行换色

最新推荐文章于 2024-07-12 18:29:20 发布

前端王小婷

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44763569/article/details/89679992

版权

在优化表格插件时，为了提升界面视觉效果，常常需要实现隔行换色功能。Bootstrap Table 提供了简单的方法来实现这一特性，只需少量代码即可达成。

摘要由CSDN通过智能技术生成

在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，bootstrap table的隔行换色功能也是其中的一个，几行代码就OK了。

代码如下：

#mytable tr:nth-child(even){
background: #fafafa;
}
#mytable th{
background: #efefef;
}

demo示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">

        <title></title>
        <style>

最低0.47元/天解锁文章

前端王小婷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap table隔行换色

在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，bootstrap table的隔行换色功能也是其中的一个，几行代码就OK了。代码如下：#mytable tr:nth-child(even){background: #fafafa;}#mytable th{background: #efefef;}demo示例<!DOC...
复制链接

扫一扫