第二章 排版 2.18表格

不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。
一、基础表格

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

☑ 给表格设置了margin-bottom:20px以及设置单元内距

☑ 在thead底部设置了一个2px的浅灰实线

☑ 每个单元格顶部设置了一个1px的浅灰实线

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

Paste_Image.png

二、斑马线表格

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

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1228431-65a6f240a01f8806.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

若想要给表格加一个边框，直接在table标签中加入"table-bordered"这个类即可（1px）  
三、紧凑型表格
  类：table-condensed
  该类重置了内距padding.

![微信截图_20160714075602.png](http://upload-images.jianshu.io/upload_images/1228431-e91a88df25b40e7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
↓↓↓
![微信截图_20160714075722.png](http://upload-images.jianshu.io/upload_images/1228431-22b01f65dc390f02.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

四、Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1228431-27c17f97db1956e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其使用非常的简单，只需要在<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>

![微信截图_20160702112531.png](http://upload-images.jianshu.io/upload_images/1228431-890a55df7e82031c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

五、响应式表格
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。

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