Bootstrap入门五：表格

table样式：

.table:表格基本样式，很少的padding,灰色的细水平分隔线。

.table-striped:斑马纹样式，隔行换色。

.table-bordered:为表格和其中的每个单元格增加边框。

.table-hover:鼠标悬停，鼠标经过数据行时，该行背景色与斑马纹背景效果相同。

.table-condensed:紧凑型表格，padding减半。

<table class="table table-striped table-bordered table-hover">
......
</table>

tr或td样式：通过这些状态类可以为行或单元格设置颜色。

.active:鼠标悬停在行或单元格上时所设置的颜色

.success:标识成功或积极的动作

.danger:标识危险或潜在的带来负面影响的动作

.warning:标识警告或需要用户注意

.info:标识普通的提示信息或动作

<table class="table table-bordered table-hover">
<tr><th>样式表</th><th>说明</th></tr>
<tr class="success"><td>.....
</table>

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
<table class="table">
...
</table>
</div>

<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="danger">Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>