スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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」を適用

表を縞模様にする

表に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>
    

ブラウザでの表示

表にclass「table-striped」を適用

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

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-bordered」を適用

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

表に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>

ブラウザでの表示

表にclass「table-hover」を適用

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

行やセルに「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>

ブラウザでの表示

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

その他のテーブル書式

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

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