table-res

テーブルをレスポンシブデザイン対応させるには、

  • CSSのブレークポイントに記述して対応
  • jQueryで対応
  • jQueryプラグインを利用して対応

などがあると思いますが、今日は、簡単に素早く対応出来るjQueryプラグインを使うについてのまとめ。

テーブルをレスポンシブデザイン対応させるためのjQueryプラグイン

まずは、このブログでも使用しているjQueryプラグインから

ウィンドウサイズの幅が狭くなると、スクロールバーが表示されます。

Responsive Tables

Responsive Tables

デモもあり、それをダウンロードすることもできます。

設置方法

設置はとても簡単。

Responsive Tables with CSS/JSよりファイルをダウンロードして、JavaScriptとCSSを読み込むだけです。

Chrome、Safari、Firefox、IE9対応です。

モバイルでは、iOS、Android3以上とWindows Phone 7対応。

設置例

768pxを境にデザインが切り替わります。

ブラウザの幅を小さくしてみてください。

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6
row 1, cell 1 row 1, cell 2 row 1, cell 3 row 1, cell 4 row 1, cell 5 row 1, cell 6

FooTable

ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替えます。

Footable-1

デモもあります。

設置方法

Githubよりファイルをダウンロードして、JavaScriptとCSSを読み込みます。

Breakpoints

以下の2箇所

設置例

demoのviewportを変更してみた図になります。(iPhone5サイズ)

Footable

テーブルをレスポンシブデザイン対応させるために

冒頭でも書きましたが、テーブルをレスポンシブデザイン対応するには、いろいろな手法があります。

今回は、jQueryプラグインで対応としましたが、どうやら対応デバイスや対応ブラウザの制限があったりと、マルチな対応というのが難しいのが現状のようです。

参考にさせていただいた記事

今回このブログのテーブルをレスポンシブデザイン対応させるためにとてもとても参考にさせて頂きました。

CSSでの設置方法なども書かれています。

DesignSpice

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

トップへ戻る