表格的斑馬樣式即根據行數來實現不同的樣式，用最簡單的背景樣式 這種樣式的實現很簡單，代碼如下
<!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以及更早版本。