# 表格
**基本样式类**
.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）.
> 注意想要实现响应式表格必须表格**内部内容足够多**才可以。否则还是不会显示。需要将上面的代码进行多次
