31
Jan 2017
by
篠原 絵理奈
初めまして、篠原です。
社内では平野ノラとも呼ばれています。 どうぞ宜しくお願いします。
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;
}
上記のcssをtableに指定すると、画面幅が小さい時に要素を折り返してくれるためスクロールする範囲が狭くなります。
個人的にはスクロールより折り返しの方がスマホの時はみやすくて好きです。