表具有先進的造型

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>