表格是Bootstrap的一個基礎(chǔ)組件之一，Bootstrap為表格提供了一種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格。在使用Bootstrap的表格過程中，只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格。
同樣的，如果你對CSS預(yù)處理器熟悉，你可以使用Bootstrap提供的預(yù)處理版本：LESS版本，對應(yīng)的文件是tables.less，Sass版本，對應(yīng)的文件是_tables.scss.也可以在bootstrap.css文件中第1402行~第1603行中可以查閱到所有關(guān)于table的樣式代碼。
Bootstrap還未表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，其使用就是在<tr>元素中添加上表對應(yīng)的類名，具體說明如下表所示：
特別提示：除了".active"之外，其他四個類名和".table-hover"配合使用時，Bootstrap針對這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時，在".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中，對于基礎(chǔ)表格是通過類名".table"來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。大致長得如下圖所示的樣子：
".table"主要有三個作用:
給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距；在thead底部設(shè)置了一個2px的淺灰實(shí)線；每個單元格頂部設(shè)置了一個1px的淺灰實(shí)線。
斑馬線表格
在<table class="table">的基礎(chǔ)上增加類名".table-striped"即可：
其效果與基礎(chǔ)表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實(shí)現(xiàn)原理也非常的簡單，利用CSS3的結(jié)構(gòu)性選擇器".nth-child"來實(shí)現(xiàn)，所以對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ǔ)上添加一個".table-bordered"類名即可：
.table-bordered {
border: 1px solid #ddd;/*整個表格設(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; /*每個單元格設(shè)置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;/*表頭底部邊框*/
}
鼠標(biāo)懸浮高亮的表格
表格效果：當(dāng)鼠標(biāo)懸停在表格行上面有一個高亮的背景色，默認(rèn)為淺灰色，僅需在<table class="table>元素上添加類名"table-hover"即可：
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}
緊湊型表格
簡單理解，就是單元格沒內(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時，表格底部會出現(xiàn)水平滾動條。當(dāng)你的瀏覽器可視區(qū)域大于768px時，表格底部水平滾動條會消失。
實(shí)現(xiàn)方式：Bootstrap提供了一個容器，并且此容器設(shè)置類名"table-responsive"，此容器具有響應(yīng)式效果，然后將<table class="table">置于這個容器當(dāng)中，這樣表格也就具有響應(yīng)式效果。
