单一的表格很容易使人感到枯燥，使用变色效果可以使得表格看起来更加舒适，在本文将为大家介绍下使用css实现隔行变色显示，感兴趣的朋友可以参考下
在html中常常需要从数据库中获取数据然后显示到浏览器上，显示的方式一般是用表格。单一的表格很容易使人感到枯燥，使用变色效果可以使得表格看起来更加舒适。实现方法如下
/*css*/
/*表格修饰*/
.tablelist{
border:1px solid #0058a3;
font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;
border-collapse:collapse;
border-spacing:1pt;
background-color:#eaf5ff;
font-size:13px
}
.tablelist tr.backrow{
background-color:#c7e5ff;
}
.tablelist td.cen{
text-align:center;
}
效果如图：
复制代码
代码如下:/*css*/
/*表格修饰*/
.tablelist{
border:1px solid #0058a3;
font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;
border-collapse:collapse;
border-spacing:1pt;
background-color:#eaf5ff;
font-size:13px
}
.tablelist tr.backrow{
background-color:#c7e5ff;
}
.tablelist td.cen{
text-align:center;
}
| 姓名 | 英语 | 数据结构 | 数据库 | 线性代数 | 离散数学 | 操作系统 |
| 影魔 | 78 | 77 | 80 | 90 | 12 | 55 |
| 祈求者 | 43 | 23 | 78 | 67 | 78 | 73 |
| 暗夜游侠 | 78 | 56 | 55 | 73 | 83 | 74 |
| 赏金猎人 | 94 | 35 | 74 | 96 | 32 | 67 |
| 椰子船长 | 76 | 78 | 54 | 45 | 56 | 67 |
| 暗夜刺客 | 78 | 56 | 67 | 45 | 90 | 67 |
| 骷髅王 | 78 | 56 | 44 | 56 | 67 | 34 |
| 山岭巨人 | 56 | 76 | 45 | 34 | 76 | 78 |
效果如图：
以上就是css美化表格让其隔行变色显示的详细内容，更多请关注0133技术站其它相关文章！
