テーブルの書式: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-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で囲んで適用します。