Bootstrap 手册 02 - 表格篇

Bootstrap 提供 1 种基础样式和 4 种附加样式以及 1 个支持响应式的表格；

• 表格基本 HTML 结构

<table>
  <thead>
    <tr>
      <th>表格标题</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>表格单元格</td>
    </tr>
  </tbody>
</table>

• 基础表格以外的 5 种表格均是在基础表格的基础上添加类名的；
• 除了 .active 之外，其他四个行元素类名和 .table-hover 配合使用时，Bootstrap 针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给 tr 元素添加其他颜色样式时，在 .table-hover 表格中也要做相应的调整；

0. 行元素 tr

Bootstrap 为 tr 提供了五种不同的行元素类名，每种类名控制了行的不同背景颜色；

• .active：背景色 #F5F5F5；
• .success：背景色 #DFF0D8；
• .info：背景色 #D9EDF7；
• .warning：背景色 #FCF8E3；
• .danger：背景色 #F2DEDE；

1. 基础表格

• table.table
• 为表格设置了 margin-bottom: 20px; 以及设置单元内距；
• 在 thead 底部设置了一个 2px 浅灰实线；
• 每个单元格顶部设置了一个 1px 浅灰实线；

基础表格

2. 斑马线表格

• table.table.table-striped
• 与基础表格相比，仅是在 tbody 隔行有一个浅灰色的背景色；
• IE8 及其以下浏览器没有背景条纹效果；

斑马线表格

3. 带边框表格

• table.table.table-bordered
• 所有单元格具有一条 1px 的边框；

带边框表格

4. 鼠标悬停高亮的表格

• table.table.table-hover
• 当鼠标悬停在表格的行上面有一个高亮的背景色；

鼠标悬停高亮表格

5. 紧凑型表格

• table.table.table-condensed
• 单元格没内距或者内距较其他表格的内距更小（单元格的内距由 8px 调至 5px）；

紧凑型表格

6. 响应式表格

• table.table.table-responsive
• 当渲染视界宽度小于 768px 时，表格底部会出现水平滚动条；否则水平滚动条消失；

响应式表格（宽屏效果）
响应式表格（窄屏效果）