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