今天介绍纯css实现table细边框并隔行变色,采用css3 :nth-child(n) 选择器实现table隔行变色效果,效果如下
我们在表格里面经常用到,案例中用的灰色,您可以自行修改颜色值
<style> /*细边框样式*/ table{border-collapse:collapse;} table,th,td{border:1px solid #ccc;padding:5px 10px;} /*设置表头背景为灰色*/ th{background:#ddd} /*鼠标移上来,行背景变为灰色*/ tr:hover td{background:#fbf8e9} /*隔行变色*/ tr:nth-child(2n){background:#eee} tr:nth-child(2n-1){background:#fff} </style> <table id="table"> <thead> <tr> <th>标题:第一列</th> <th>标题:第二列</th> <th>标题:第三列</th> </tr> </thead> <tbody> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> </tr> <tr> <td>row 3, cell 1</td> <td>row 3, cell 2</td> <td>row 3, cell 3</td> </tr> <tr> <td colspan="2">合并2行</td> <td>row 4, cell 3</td> </tr> </tbody> </table>