在本教程中，我们将学习在Bootstrap中设置表格样式。

表类

要在Bootstrap中设置表格样式，我们可以将.table类添加到开始表格标签中。

<table class="table">
  <tr>
    <th>#</th>
    <th>Username</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Batman</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Superman</td>
  </tr>
  <tr>
    <td>3</td>
    <td>WonderWoman</td>
  </tr>
</table>

条纹行

要在表格中获得带区卷的行，请将.table-striped类添加到开头的表格标签中。

<table class="table table-striped">
  <tr>
    <th>#</th>
    <th>Username</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Batman</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Superman</td>
  </tr>
  <tr>
    <td>3</td>
    <td>WonderWoman</td>
  </tr>
</table>

边框表

要在表格中添加边框，请在开头的表格标签中添加.table-bordered类。

<table class="table table-bordered">
  <tr>
    <th>#</th>
    <th>Username</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Batman</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Superman</td>
  </tr>
  <tr>
    <td>3</td>
    <td>WonderWoman</td>
  </tr>
</table>

悬停行

要在表格行上启用悬停状态，请将.table-hover类添加到开头的表格标签中。

<table class="table table-hover">
  <tr>
    <th>#</th>
    <th>Username</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Batman</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Superman</td>
  </tr>
  <tr>
    <td>3</td>
    <td>WonderWoman</td>
  </tr>
</table>

紧凑表格

为了通过将单元格填充减半来使表更紧凑，我们在开始表标签中使用.table-condensed类。

<table class="table table-condensed">
  <tr>
    <th>#</th>
    <th>Username</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Batman</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Superman</td>
  </tr>
  <tr>
    <td>3</td>
    <td>WonderWoman</td>
  </tr>
</table>

上下文类

我们使用上下文类为表格行和单个单元格上色。

我们可以在打开tr标签以及打开td和th标签中使用这些类。

<!-- On rows -->
<tr class="active"> some content </tr>
<tr class="success"> some content </tr>
<tr class="warning"> some content </tr>
<tr class="danger"> some content </tr>
<tr class="info"> some content </tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active"> some content </td>
  <td class="success"> some content </td>
  <td class="warning"> some content </td>
  <td class="danger"> some content </td>
  <td class="info"> some content </td>
</tr>

<tr>
  <th class="active"> some content </th>
</tr>

例：

<table class="table table-condensed">
  <tr>
    <th>#</th>
    <th>Description</th>
  </tr>
  <tr class="active">
    <td>1</td>
    <td>Some description</td>
  </tr>
  <tr class="success">
    <td>2</td>
    <td>Some description</td>
  </tr>
  <tr class="warning">
    <td>3</td>
    <td>Some description</td>
  </tr>
  <tr class="danger">
    <td>4</td>
    <td>Some description</td>
  </tr>
  <tr class="info">
    <td>5</td>
    <td>Some description</td>
  </tr>
</table>

响应式表格

为了创建响应表，我们将任何.table软件包在.table-sensitive中。
这使得表格在小型设备(768像素以下)上水平滚动。

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th>#</th>
      <th>Username</th>
      <th>Current Status</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Batman</td>
      <td>In Gotham city.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Superman</td>
      <td>Flying back from his planet Krypton to Earth.</td>
    </tr>
    <tr>
      <td>3</td>
      <td>WonderWoman</td>
      <td>In London.</td>
    </tr>
  </table>
</div>