.tableクラスの要素を.table-responsiveのクラスで囲うとテーブルの下に横スクロールバーが表示され、 スマホなどのモバイル端末にも対応出来るテーブルの表示ができます。768px未満でスクロールが表示されます。 複雑な構造のテーブの表示はレスポンシブ対応の際に悩まされますが、 このスクロール表示は解決手段の一つとして使えます。
サンプル
HTML
<div class="table-responsive"> <table class="table table-bordered table-striped"> <tbody> <tr> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> </tr> <tr> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> <td>テキストテキストテキスト</td> </tr> </tbody> </table> </div>
人気記事ランキング

1
簡単!カレンダーから日付入力 Bootstrap Datepicker の使い方と解説

2
簡単。Bootstrapでアコーディオンパネルを作る方法

3
簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル

4
簡単!動画制作 GoPro Splice – iOS ipad iphone対応のアプリの解説・使い方

5
簡単!Bootstrapで作るタブメニュー&ナビゲーション

6
bootstrap カルーセルを少しカスタマイズする方法

7
格安simスマホとガラケーの2台持ちで通信費節約mineo編

8
オバマ大統領や有名芸能人も愛用している腕時計チープカシオ(チプカシ)が話題。