テーブルの書式：Bootstrapコードまとめ

投稿：2016年03月01日｜更新：2016年03月07日

Bootstrapのコードを少しずつまとめていきます。
今回はテーブルの書式です。

テーブルの表示

表にclass「table」を適用します。

HTML

<table class="table">
      <tr><th>順位</th><th>国名</th><th>GDP（10億米ドル）</th></tr>
      <tr><td>1位</td><td>米国</td><td>17,348.08</td></tr>
      <tr><td>2位</td><td>中国</td><td>10,356.51</td></tr>
      <tr><td>3位</td><td>日本</td><td>4,602.37</td></tr>
      <tr><td>4位</td><td>ドイツ</td><td>3,874.44</td></tr>
      <tr><td>5位</td><td>英国</td><td>2,950.04</td></tr>
      <tr><td>6位</td><td>フランス</td><td>2,833.69</td></tr>
      <tr><td>7位</td><td>ブラジル</td><td>2,346.58</td></tr>
    </table>

ブラウザでの表示

表を縞模様にする

表にclass「table-striped」を適用します。

HTML

<table class="table table-striped">
      <tr><th>順位</th><th>国名</th><th>GDP（10億米ドル）</th></tr>
      <tr><td>1位</td><td>米国</td><td>17,348.08</td></tr>
      <tr><td>2位</td><td>中国</td><td>10,356.51</td></tr>
      <tr><td>3位</td><td>日本</td><td>4,602.37</td></tr>
      <tr><td>4位</td><td>ドイツ</td><td>3,874.44</td></tr>
      <tr><td>5位</td><td>英国</td><td>2,950.04</td></tr>
      <tr><td>6位</td><td>フランス</td><td>2,833.69</td></tr>
      <tr><td>7位</td><td>ブラジル</td><td>2,346.58</td></tr>
    </table>

ブラウザでの表示

データ部分のみ縞模様にする

HTML

<table class="table table-striped">
    <thead>
      <tr><th>順位</th><th>国名</th><th>GDP（10億米ドル）</th></tr>
    </thead>
    <tbody>
      <tr><td>1位</td><td>米国</td><td>17,348.08</td></tr>
      <tr><td>2位</td><td>中国</td><td>10,356.51</td></tr>
      <tr><td>3位</td><td>日本</td><td>4,602.37</td></tr>
      <tr><td>4位</td><td>ドイツ</td><td>3,874.44</td></tr>
      <tr><td>5位</td><td>英国</td><td>2,950.04</td></tr>
      <tr><td>6位</td><td>フランス</td><td>2,833.69</td></tr>
      <tr><td>7位</td><td>ブラジル</td><td>2,346.58</td></tr>
    </tbody>
    </table>

ブラウザでの表示

表を枠線で囲む

表にclass「table-bordered」を適用します。

HTML

<table class="table table-striped table-bordered">
    <thead>
      <tr><th>順位</th><th>国名</th><th>GDP（10億米ドル）</th></tr>
    </thead>
    <tbody>
      <tr><td>1位</td><td>米国</td><td>17,348.08</td></tr>
      <tr><td>2位</td><td>中国</td><td>10,356.51</td></tr>
      <tr><td>3位</td><td>日本</td><td>4,602.37</td></tr>
      <tr><td>4位</td><td>ドイツ</td><td>3,874.44</td></tr>
      <tr><td>5位</td><td>英国</td><td>2,950.04</td></tr>
      <tr><td>6位</td><td>フランス</td><td>2,833.69</td></tr>
      <tr><td>7位</td><td>ブラジル</td><td>2,346.58</td></tr>
    </tbody>
    </table>

ブラウザでの表示

マウスホバーで行を強調する

表にclass「table-hover」を適用します。

HTML

<table class="table table-hover">
    <thead>
      <tr><th>順位</th><th>国名</th><th>GDP（10億米ドル）</th></tr>
    </thead>
    <tbody>
      <tr><td>1位</td><td>米国</td><td>17,348.08</td></tr>
      <tr><td>2位</td><td>中国</td><td>10,356.51</td></tr>
      <tr><td>3位</td><td>日本</td><td>4,602.37</td></tr>
      <tr><td>4位</td><td>ドイツ</td><td>3,874.44</td></tr>
      <tr><td>5位</td><td>英国</td><td>2,950.04</td></tr>
      <tr><td>6位</td><td>フランス</td><td>2,833.69</td></tr>
      <tr><td>7位</td><td>ブラジル</td><td>2,346.58</td></tr>
    </tbody>
    </table>

ブラウザでの表示

行やセルの背景色を変更する

行やセルに「active」「success」「info」「warning」「danger」などのclassを適用します。

HTML

<table class="table table-bordered">
    <thead>
      <tr><th>順位</th><th>国名</th><th>GDP（10億米ドル）</th></tr>
    </thead>
    <tbody>
      <tr><td>1位</td><td>米国</td><td>17,348.08</td></tr>
      <tr><td>2位</td><td>中国</td><td>10,356.51</td></tr>
      <tr><td>3位</td><td>日本</td><td class="info">4,602.37</td></tr>
      <tr><td>4位</td><td>ドイツ</td><td>3,874.44</td></tr>
      <tr><td>5位</td><td>英国</td><td>2,950.04</td></tr>
      <tr class="warning"><td>6位</td><td>フランス</td><td>2,833.69</td></tr>
      <tr class="danger"><td>7位</td><td>ブラジル</td><td>2,346.58</td></tr>
    </tbody>
    </table>

ブラウザでの表示

その他のテーブル書式

テーブルをコンパクトに表示するclass「table-condensed」、セル内の余白を小さくします。

スマフォ用に表を横スクロールで表示するclass「table-responsive」、テーブルをdivで囲んで適用します。

Twitter でシェア Facebook でシェア Google+ でシェア