有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果并不困難，只需要在<table class="table">的基礎上增加類名“.table-striped”即可：
<table class="table table-striped"> … </table>
其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用CSS3的結構性選擇器“:nth-child”來實現，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。
源碼請查看bootstrap.css文件第1465行~第1468行：
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
我也來試試：完成下面任務
在右側代碼編輯器第10行補充正確代碼，實現下圖所示的斑馬線表格效果：
正確代碼如下：
<table class="table table-striped"> ... </table>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報