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

基本のテーブル

<table class="table">

</table>

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

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

<table class="table table-striped">

</table>

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

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

<table class="table table-hover">

</table>

縦線を追加

<table class="table table-bordered">

</table>

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

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

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

セル 
<th class="success"></th>
   <td class="info"></td>

レスポンシブ

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

   </table>
</div>

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

テーブル幅の変更

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