テーブル

基本的なテーブル

基本的なBootstrapテーブルには、水平の仕切りだけがあります。
.table クラスは基本的なスタイルをテーブルに追加します。

名字	名前	Email
山田	太郎	tarou@example.com
山田	花子	hanako@example.com

<table class="table">
  <thead>
    <tr>
      <th>名字</th>
      <th>名前</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田</td>
      <td>太郎</td>
      <td>tarou@example.com</td>
    </tr>
    <tr>
      <td>山田</td>
      <td>花子</td>
      <td>hanako@example.com</td>
    </tr>
  </tbody>
</table>

ストライプテーブル

.table-striped クラスは、表にゼブラストライプを追加します。

名字	名前	Email
山田	太郎	tarou@example.com
山田	花子	hanako@example.com

<table class="table table-striped">
  <thead>
    <tr>
      <th>名字</th>
      <th>名前</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田</td>
      <td>太郎</td>
      <td>tarou@example.com</td>
    </tr>
    <tr>
      <td>山田</td>
      <td>花子</td>
      <td>hanako@example.com</td>
    </tr>
  </tbody>
</table>

ボーダーテーブル

.table-bordered クラスは、表とセルのすべての面に罫線を追加します。

名字	名前	Email
山田	太郎	tarou@example.com
山田	花子	hanako@example.com

<table class="table table-bordered">
  <thead>
    <tr>
      <th>名字</th>
      <th>名前</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田</td>
      <td>太郎</td>
      <td>tarou@example.com</td>
    </tr>
    <tr>
      <td>山田</td>
      <td>花子</td>
      <td>hanako@example.com</td>
    </tr>
  </tbody>
</table>

ホバーテーブル

.table-hover クラスは、表の行にホバー効果（灰色の背景色）を追加します。(マウスオーバー時)

名字	名前	Email
山田	太郎	tarou@example.com
山田	花子	hanako@example.com

<table class="table table-hover">
  <thead>
    <tr>
      <th>名字</th>
      <th>名前</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田</td>
      <td>太郎</td>
      <td>tarou@example.com</td>
    </tr>
    <tr>
      <td>山田</td>
      <td>花子</td>
      <td>hanako@example.com</td>
    </tr>
  </tbody>
</table>

コンデンステーブル

.table-condensed クラスは、セルのパディングを半分にカットすることでテーブルをよりコンパクトにします。

名字	名前	Email
山田	太郎	tarou@example.com
山田	花子	hanako@example.com

<table class="table table-condensed">
  <thead>
    <tr>
      <th>名字</th>
      <th>名前</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田</td>
      <td>太郎</td>
      <td>tarou@example.com</td>
    </tr>
    <tr>
      <td>山田</td>
      <td>花子</td>
      <td>hanako@example.com</td>
    </tr>
  </tbody>
</table>

コンテキストクラス

コンテキストクラスを使用して表の行 <tr> または表のセル <td> に色を付けることができます。

色	名字	名前
success	山田	太郎
info	山田	花子
warning	山田	太郎
danger	山田	花子
active	山田	太郎

<table class="table table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th>色</th>
      <th>名字</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>success</td>
      <td>山田</td>
      <td>太郎</td>
    </tr>
    <tr class="info">
      <td>info</td>
      <td>山田</td>
      <td>花子</td>
    </tr>
    <tr class="warning">
      <td>warning</td>
      <td>山田</td>
      <td>太郎</td>
    </tr>
    <tr class="danger">
      <td>danger</td>
      <td>山田</td>
      <td>花子</td>
    </tr>
    <tr class="active">
      <td>active</td>
      <td>山田</td>
      <td>太郎</td>
    </tr>
  </tbody>
</table>

レスポンシブテーブル

.table-responsive クラスはレスポンシブテーブルを作成します。小さなデバイス（768px未満）ではテーブルが水平にスクロールします。
<div> タグでテーブルを囲います。

色	名字	名前	Email	備考
success	山田	太郎	tarou@example.com	スマートフォンでは
info	山田	花子	hanako@example.com	横スクロールが発生します。

<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th>色</th>
      <th>名字</th>
      <th>名前</th>
      <th>Email</th>
      <th>備考</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>success</td>
      <td>山田</td>
      <td>太郎</td>
      <td>tarou@example.com</td>
      <td>スマートフォンでは</td>
    </tr>
    <tr class="info">
      <td>info</td>
      <td>山田</td>
      <td>花子</td>
      <td>hanako@example.com</td>
      <td>横スクロールが発生します。</td>
    </tr>
  </tbody>
</table>
</div>