表具有先进的造型

Bootstrap 提供了几个用于高级表样式的类。

条纹的行

如果添加 .table-striped 类，你将拥有一个带有条带行的表：

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

注意：

条带表通过:nth-child CSS 选择器设置样式，这在 Internet Explorer 8 中不可用。

边界表

如果添加 .table-bordered 类，你将在表格和单元格的所有边上都有一个带边框的表格：

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

将鼠标悬停在行上

如果添加 .table-hover 类，当用户将鼠标悬停在一行上时，你将拥有一个突出显示的行的表：

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

浓缩表

如果你添加 .table-condensed 类，默认的单元格填充将减半，所以你将有一个更紧凑的表：

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

上下文类

Bootstrap 表支持上下文颜色。要更改表格行或单元格的背景颜色，你只需添加以下上下文类别之一：.active，.success，.info，.warning，.danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>