テーブルをレスポンシブデザイン対応させるには、
- CSSのブレークポイントに記述して対応
- jQueryで対応
- jQueryプラグインを利用して対応
などがあると思いますが、今日は、簡単に素早く対応出来るjQueryプラグインを使うについてのまとめ。
テーブルをレスポンシブデザイン対応させるためのjQueryプラグイン
まずは、このブログでも使用しているjQueryプラグインから
ウィンドウサイズの幅が狭くなると、スクロールバーが表示されます。
Responsive Tables
デモもあり、それをダウンロードすることもできます。
設置方法
設置はとても簡単。
Responsive Tables with CSS/JSよりファイルをダウンロードして、JavaScriptとCSSを読み込むだけです。
|
1 2 3 4 5 |
<link rel="stylesheet" href="responsive-tables.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!--[if !lt IE 9]> <script src="js/responsive-tables.js"></script> <!--<![endif]--> |
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
ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替えます。
デモもあります。
設置方法
Githubよりファイルをダウンロードして、JavaScriptとCSSを読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//CSSを読み込む <link href="css/footable-0.1.css" rel="stylesheet" type="text/css" /> //jsを読み込む <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="js/footable-0.1.js" type="text/javascript"></script> //プラグインを読み込む <script type="text/javascript"> $(function() { $('table').footable(); }); </script> |
Breakpoints
以下の2箇所
|
1 2 3 4 |
breakpoints: { phone: 480, tablet: 1024 } |
設置例
demoのviewportを変更してみた図になります。（iPhone5サイズ）
テーブルをレスポンシブデザイン対応させるために
冒頭でも書きましたが、テーブルをレスポンシブデザイン対応するには、いろいろな手法があります。
今回は、jQueryプラグインで対応としましたが、どうやら対応デバイスや対応ブラウザの制限があったりと、マルチな対応というのが難しいのが現状のようです。
参考にさせていただいた記事
今回このブログのテーブルをレスポンシブデザイン対応させるためにとてもとても参考にさせて頂きました。
CSSでの設置方法なども書かれています。
Pingback: ウェブログ » テーブル（表）をレスポンシブにするjQueryプラグイン()