大家對(duì)表格并不太陌生，但對(duì)于Bootstrap中的表格如何使用，或許還有點(diǎn)陌生，接下來的內(nèi)容，將根據(jù)不同的表格類型向大家介紹Bootstrap表格的實(shí)際使用方法。
對(duì)表格的結(jié)構(gòu)，跟我們平時(shí)使用表格是一樣的：

<table>
<thead>
<tr>
<th>表格標(biāo)題</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
…
</tr>
     …
</tbody>
</table>

如無特別聲明，下面介紹表格類型的時(shí)候，結(jié)構(gòu)都是類似上面的代碼。
基礎(chǔ)表格
在Bootstrap中，對(duì)于基礎(chǔ)表格是通過類名“.table”來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在<table>元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格：

<table class="table">
…
</table>

Bootstrap的基礎(chǔ)表格，大致長得像下圖所示的樣子：

主要源碼查看bootstrap.css文件第1402行～第1441行，由于代碼太長，此處不一一列舉。

“.table”主要有三個(gè)作用：

  ?  給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距

  ?  在thead底部設(shè)置了一個(gè)2px的淺灰實(shí)線

  ?  每個(gè)單元格頂部設(shè)置了一個(gè)1px的淺灰實(shí)線