テーブル

基本的なテーブル

基本的な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>