表具有先进的造型

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>