レスポンシブ対応したテーブル

BootStrapのtable-responsiveでレスポンシブ対応したテーブルを作成する方法

.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>

人気記事ランキング

投稿者:

kishiken

【プロフ】企業務めのWEBデザイナーです。デザイン、コーディング、CMS構築と広く浅く活動中。過去にバンド活動を経験。神奈川出身。川崎市在住。【資格】html5プロフェッショナル認定試験 レベル1【趣味】音楽(ポストロック、エモ、USインディ、JPインディ)、DIY住宅リノベーション

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です