前端-table表格隔行变色

最新推荐文章于 2024-06-18 18:13:04 发布

keyson R

最新推荐文章于 2024-06-18 18:13:04 发布

阅读量2.2w

点赞数 9

分类专栏：前端文章标签： jquery html css table

本文链接：https://blog.csdn.net/qsloony/article/details/80135081

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

table表格隔行变色

作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。

:nth-child(): 定义和用法

:nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式

使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后台表格的数据展现得非常多而且又密集，当我想查一下这第数据是什么类型时，得盯紧它，深怕看到下一行了。
当时是这样的：
这里写图片描述

当时我就想着，来个前端多好啊，直接就可以交给他了。哈哈~
没办法，我就算想破脑袋他也不来啊，只能自己上手咯。

demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table, tr, td, th
{
    padding: 0;
    margin: 0;
}
table
{
    width: 100%;
    border-color: #ccc;
}
table tr
{
    line-height: 30px;
    border-color: #ccc;
}
table th, table td{
    text-align: center;
    border-color: #ccc;
}
</style>
</head>

<body>
<table border="1" cellspacing="0">
    <thead>
        <tr>
            <th>某仓库货架</th>
            <th>某仓库货架</th>
            <th>某仓库货架</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>太阳能</td>
        <td>空气能</td>
        <td>电能</td>
    </tr>
    <tr>
        <td>床头闹钟</td>
        <td>床头闹钟</td>
        <td>床头闹钟</td>
    </tr>
    <tr>
        <td>太阳能</td>
        <td>空气能</td>
        <td>电能</td>
    </tr>
    <tr>
        <td>床头闹钟</td>
        <td>床头闹钟</td>
        <td>床头闹钟</td>
    </tr>
    </tbody>
</table>
</body>
</html>

主要核心样式是：二者择其一

/*设置奇数行颜色*/
table tr:nth-child(odd)
{
    background: #ccc;
}
/*设置偶数行颜色*/
table tr:nth-child(even)
{
    background: #ccc;
}

效果图：
这里写图片描述

keyson R

关注

9
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
前端-table表格隔行变色

table表格隔行变色作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。:nth-child(): 定义和用法 :nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后
复制链接

扫一扫

专栏目录