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;
}
效果图: