# 表格
**基本樣式類**
.table 基本樣式 (只有橫向分隔線);
.table-striped 在 內添加斑馬線形式的條紋,隔行變色 ( IE8 不支持);
.table-bordered 添加邊框;
.table-hover 在 內的任一行啟用鼠標懸停狀態;
.table-condensed 緊湊表格。
注意:以上所有類名都是給table添加的!
**行或單元格設置顏色狀態類**
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動作
.info 標識普通的提示信息或動作
.warning 標識警告或需要用戶注意
.danger 標識危險或潛在的帶來負面影響的動作
```
<div class="container">
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr class="success">
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>設計+代碼</td>
</tr>
<tr class="active">
<td>1</td>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>設計+代碼</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>設計+代碼</td>
</tr>
<tr class="warning">
<td>1</td>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>設計+代碼</td>
</tr>
<tr>
<td>1</td>
<td class="danger">小明</td>
<td>男</td>
<td>18</td>
<td>設計+代碼</td>
</tr>
</tbody>
</table>
</div>
```
**響應式表表格**
把表格 .table 包在 .table-responsive 的類內,就可以實現表格水平滾動以適應小型設備(< 768px).
> 注意想要實現響應式表格必須表格**內部內容足夠多**才可以。否則還是不會顯示。需要將上面的代碼進行多次