表格是Bootstrap的一個(gè)基礎(chǔ)組件之一，Bootstrap為表格提供了一種基礎(chǔ)樣式和4種附加樣式以及1個(gè)支持響應(yīng)式的表格谓传。在使用Bootstrap的表格過程中收奔，只需要添加對(duì)應(yīng)的類名就可以得到不同的表格風(fēng)格给僵。
同樣的，如果你對(duì)CSS預(yù)處理器熟悉锋谐，你可以使用Bootstrap提供的預(yù)處理版本：LESS版本遍尺，對(duì)應(yīng)的文件是tables.less，Sass版本怀估，對(duì)應(yīng)的文件是_tables.scss.也可以在bootstrap.css文件中第1402行~第1603行中可以查閱到所有關(guān)于table的樣式代碼狮鸭。
Bootstrap還未表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色多搀，其使用就是在<tr>元素中添加上表對(duì)應(yīng)的類名歧蕉，具體說明如下表所示：
特別提示：除了".active"之外，其他四個(gè)類名和".table-hover"配合使用時(shí)康铭，Bootstrap針對(duì)這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置惯退，所以如果需要給tr元素添加其他顏色樣式時(shí)，在".table-hover"表格中也要做響應(yīng)的調(diào)整从藤。
注意要實(shí)現(xiàn)懸浮狀態(tài)催跪，需要在<table>標(biāo)簽上加入table-hover類锁蠕。
基礎(chǔ)表格
css表格結(jié)構(gòu)：
<table>
<thead>
<tr>
<th>表格標(biāo)題</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
...
</tr>
...
</tbody>
</table>
基礎(chǔ)表格
在Bootstrap中，對(duì)于基礎(chǔ)表格是通過類名".table"來(lái)控制懊蒸。如果在<table>元素中不添加任何類名荣倾，表格是無(wú)任何樣式效果的。大致長(zhǎng)得如下圖所示的樣子：
".table"主要有三個(gè)作用:
給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距骑丸；在thead底部設(shè)置了一個(gè)2px的淺灰實(shí)線舌仍；每個(gè)單元格頂部設(shè)置了一個(gè)1px的淺灰實(shí)線。
斑馬線表格
在<table class="table">的基礎(chǔ)上增加類名".table-striped"即可：
其效果與基礎(chǔ)表格相比通危，僅是在tbody隔行有一個(gè)淺灰色的背景色铸豁。其實(shí)現(xiàn)原理也非常的簡(jiǎn)單，利用CSS3的結(jié)構(gòu)性選擇器".nth-child"來(lái)實(shí)現(xiàn)菊碟，所以對(duì)IE8以及其下瀏覽器节芥，沒有背景條紋效果。
.table-striped? > tbody?> tr:nth-child(odd) > td,?
.table-striped > tbody > tr:nth-child(odd) > th{background-color:#f9f9f9;}
帶邊框的表格
表格效果:所有單元格具有一條1px的邊框逆害。在<table class="table">基礎(chǔ)上添加一個(gè)".table-bordered"類名即可：
.table-bordered {
border: 1px solid #ddd;/*整個(gè)表格設(shè)置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ddd; /*每個(gè)單元格設(shè)置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;/*表頭底部邊框*/
}
鼠標(biāo)懸浮高亮的表格
表格效果：當(dāng)鼠標(biāo)懸停在表格行上面有一個(gè)高亮的背景色头镊，默認(rèn)為淺灰色，僅需在<table class="table>元素上添加類名"table-hover"即可：
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}
緊湊型表格
簡(jiǎn)單理解忍燥，就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小拧晕。僅需在<table class="table">基礎(chǔ)上添加類名"table-condensed"即可隙姿。但其實(shí)與基礎(chǔ)表格差別不大梅垄，因?yàn)橹皇菍卧竦膬?nèi)距由8px調(diào)至5px.
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
響應(yīng)式表格
表格效果：當(dāng)你的瀏覽器可視區(qū)域小于768px時(shí)，表格底部會(huì)出現(xiàn)水平滾動(dòng)條输玷。當(dāng)你的瀏覽器可視區(qū)域大于768px時(shí)队丝，表格底部水平滾動(dòng)條會(huì)消失。
實(shí)現(xiàn)方式：Bootstrap提供了一個(gè)容器欲鹏，并且此容器設(shè)置類名"table-responsive"机久，此容器具有響應(yīng)式效果，然后將<table class="table">置于這個(gè)容器當(dāng)中赔嚎，這樣表格也就具有響應(yīng)式效果膘盖。
