不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的<table>元素中一定不能缺少類名“table”。
一、基礎表格

“.table”主要有三個作用：

☑ 給表格設定了margin-bottom:20px以及設定單元內距

☑ 在thead底部設定了一個2px的淺灰實線

☑ 每個單元格頂部設定了一個1px的淺灰實線

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

二、斑馬線表格

<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
 
;
}

若想要給表格加一個邊框，直接在table標籤中加入"table-bordered"這個類即可（1px）
三、緊湊型表格
類：table-condensed
該類重置了內距padding.

↓↓↓

四、Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：

其使用非常的簡單，只需要在<tr>元素中新增上表對應的類名，就能達到你自己需要的效果：

<tr class="active">
<td>…</
 
td>
</tr>

注意要實現懸浮狀態，需要在<table>標籤上加入table-hover類。

如下程式碼：

<table class="table-hover">

舉例：

<table class="table table-hover">
<thead>
<tr>
<th>類名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>.active</td>
<td>表示當前活動的資訊</td>
</tr>
<tr class="success ">
<td>.success</td>
<td>表示成功或者正確的行為</td>
</tr>
<tr class="info">
<td>.info</td>
<td>表示中立的資訊或行為</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>表示警告，需要特別注意</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>表示危險或者可能是錯誤的行為</td>
</tr>
</tbody>
</table>

五、響應式表格

Bootstrap提供了一個容器，並且此容器設定類名“.table-responsive”,此容器就具有響應式效果，然後將<table class="table">置於這個容器當中，這樣表格也就具有響應式效果。

<div class="table-responsive">
<table class="table table-bordered">
…
</table>
</div>