Bootstrap4 表格

Bootstrap4 表格，Bootstrap4 通过.table类来设置基础表格的样式，本文列举了条纹表格、边框表格、鼠标悬停状态表格、黑色背景表格、黑色条纹表格、指定颜色表格等。

条纹表格

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：

<table class="table table-striped">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

输出结果如图：

边框表格

.table-bordered 类可以为表格添加边框

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

输出结果如图：

鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：

<table class="table table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

输出结果如图：

黑色背景表格

.table-dark 类可以为表格添加黑色背景：

<table class="table table-dark">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

输出结果如图：

黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：

<table class="table table-dark table-striped">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

输出结果如图：

指定颜色表格

通过指定意义的颜色类可以为表格的行或者单元格设置颜色：

<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>Primary</td>
      <td>Joe</td>
      <td>joe@example.com</td>
    </tr>
    <tr class="table-success">
      <td>Success</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr class="table-danger">
      <td>Danger</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

输出结果如图：

下表列出了表格颜色类的说明: