表格的斑马样式即根据行数来实现不同的样式，用最简单的背景样式 这种样式的实现很简单，代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> tr:nth-child(2n){ background-color: #2AABD2; } tr:nth-child(2n+1){ background-color:#3E8F3E; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-2"></div> <table class="table"> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> <th>权限</th> </tr> <tr> <td>1</td> <td>张三</td> <td>123</td> <td>管理员</td> </tr> <tr> <td>2</td> <td>张三</td> <td>123</td> <td>管理员</td> </tr> <tr> <td>3</td> <td>张三</td> <td>123</td> <td>管理员</td> </tr> <tr> <td>4</td> <td>张三</td> <td>123</td> <td>管理员</td> </tr> </table> <div class="col-sm-2"></div> </div> </div> </body> </html>
这种样式的实现主要利用的css样式中的:nth-child选择器，他可以自动判断奇偶行来进行样式的设定，就可以实现斑马纹的效果了。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
注意：各大主流浏览器基本支持，除了IE8以及更早版本。