Tagbangers Blog

Bootstrap3でテーブルをつくってみる

初めまして、篠原です。

社内では平野ノラとも呼ばれています。 どうぞ宜しくお願いします。

Bootstrap3で表を作るときに便利なclassを使ってみました。


基本のテーブル

<table class="table">

</table>
順位
名前
県名
票数
1位
奈良県
せんとくん
60票
2位
愛知県
ひでっち
45票
3位
神奈川県
ヤマトン
44票
4位
新潟県
レルヒさん
43票
5位
兵庫県
はばタン
37票

ちなみにこちらは、地域マスコットの見た目ダサくね!?と思う都道府県ランキングです。
私はヤマトンが好きなので少々悲しかったです。
参考にしたランキングサイトはこちら → goo ランキング
さて続いて、便利なクラスをみていきます。


背景に1行間隔で色をつける

<table class="table table-striped">

</table>
順位
名前
県名
票数
1位
奈良県
せんとくん
60票
2位
愛知県
ひでっち
45票
3位
神奈川県
ヤマトン
44票
4位
新潟県
レルヒさん
43票
5位
兵庫県
はばタン
37票

これだけで、みやすくなりました。


Hoverした時に背景色が変わる

<table class="table table-hover">

</table>
順位
名前
県名
票数
1位
奈良県
せんとくん
60票
2位
愛知県
日でっち
45票
3位
神奈川県
ヤマトン
44票
4位
新潟県
レルヒさん
43票
5位
兵庫県
はばタン
37票


縦線を追加

<table class="table table-bordered">

</table>
順位
名前
県名
票数
1位
奈良県
せんとくん
60票
2位
愛知県
ひでっち
45票
3位
神奈川県
ヤマトン
44票
4位
新潟県
レルヒさん
43票
5位
兵庫県
はばタン
37票


表の行または個々のセルに色をつける

表やセルの中につけたい色のclassを追加

行
<tr class="active"></tr>

セル 
<th class="success"></th>
   <td class="info"></td>
クラス
意味
active
hoverカラーを適用。
success
成功。肯定。
info
中立的情報。
warning
警告。
danger
危険。否定。


レスポンシブ

<div class="table-responsive">
   <table class="table">

   </table>
</div>

<table>を .table-responsive で囲むと、768px以下の時にスクロールで表示されます。

順位
名前
県名
票数
1位
奈良県
せんとくんせんとくんせんとくんせんとくん
60票
2位
愛知県
ひでっちひでっちひでっちひでっちひでっち
45票
3位
神奈川県
ヤマトンヤマトンヤマトンヤマトン
44票
4位
新潟県
レルヒさんレルヒさんレルヒさんレルヒさん
43票
5位
兵庫県
はばタンはばタンはばタンはばタンはばタン
37票

テーブル幅の変更

<table>内の可変したい部分にbootstrapのgridを追加する

※レスポンシブについての過去ブログはこちら → Bootstrap のレスポンシブ


CSSで設定

また、小さくした時にtable-responsiveではwhite-space: nowrap;が指定されてしまうため、文字の折り返し表示ができません。
table-responsiveは使わずにcssで指定した方がスクロールを使わずに一覧が見えるので便利です。

.return-table-responsive {

    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;

}

順位
名前
県名
票数
 1位
奈良県
せんとくんせんとくんせんとくんせんとくん
60票
 2位
愛知県
ひでっちひでっちひでっちひでっちひでっち
45票
 3位
神奈川県
ヤマトンヤマトンヤマトンヤマトンヤマトン
44票
 4位
新潟県
レルヒさんレルヒさんレルヒさんレルヒさん
43票
 5位
兵庫県
はばタンはばタンはばタンはばタンはばタン
37票

上記のcssをtableに指定すると、画面幅が小さい時に要素を折り返してくれるためスクロールする範囲が狭くなります。
個人的にはスクロールより折り返しの方がスマホの時はみやすくて好きです。