## 表格 **基本实例** 给任意 \<table\> 标签添加类 .table 可以给表格添加基本的样式 — 少量的内补（padding）和水平方向的分隔线。 实例： ```html <table class="table"> <tr> <th>#</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>1</td> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr> <td>2</td> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> ```  ***** **条纹状表格** 通过`.table-striped`类可以给`<tbody>`之内的每一行增加斑马条纹样式，也就是隔行变色。 实例： ```html <table class="table table-striped"> <tr> <th>#</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>1</td> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr> <td>2</td> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> ```  ***** **带边框的表格** 添加`.table-bordered`类为表格和其中的每个单元格增加边框。 实例： ```html <table class="table table-striped table-bordered"> <tr> <th>#</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>1</td> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr> <td>2</td> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> ```  ***** **鼠标悬停** 通过添加`.table-hover`类可以让`<tbody>`中的每一行对鼠标悬停状态作出响应。 实例： ```html <table class="table table-bordered table-hover"> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> ```  鼠标移入当前行会改变当前行的背景色。 ***** **紧缩表格** 通过添加`.table-condensed`类可以让表格更加紧凑，单元格中的内补（padding）均会减半。 实例： ```html <table class="table table-bordered table-condensed"> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> ```  ***** **状态类** 通过这些状态类可以为行或单元格设置颜色。 | class | 描述 | | --- | --- | | `.active` | 鼠标悬停在行或单元格上时所设置的颜色 | | `.success` | 标识成功或积极的动作 | | `.info` | 标识普通的提示信息或动作 | | `.warning` | 标识警告或需要用户注意 | | `.danger` | 标识危险或潜在的带来负面影响的动作| 实例: ```html <table class="table table-bordered table-condensed"> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr class="active"> <th>1</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="success"> <th>2</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="info"> <th>3</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="warning"> <th>4</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="danger"> <th>5</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> ```  通过为表格中的一行或一个单元格添加颜色，给浏览网页的用户提供不同类型的信息 ***** **响应式表格** 将任何`.table`元素包裹在`.table-responsive`元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。注意：列数必须大于等于6列才有效果。 实例: ```html <div class="container"> <div class="table-responsive"> <table class="table table-bordered table-condensed"> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr class="active"> <th>1</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="success"> <th>2</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="info"> <th>3</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="warning"> <th>4</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> <tr class="danger"> <th>5</th> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </table> </div> </div> ```