resTablesは、テーブルをレスポンシブ対応にしてくれるjQueryプラグインです。ブラウザの幅が縮まると、横長のテーブルを縦に並べてくれます。
デモについては、プラグインの配布ページでご確認いただけます。
resTablesの使い方
プラグインのダウンロードと設置
プラグインの配布ページからファイルをダウンロードします。[Download .zip]をクリックすると、ファイル一式がダウンロードされます。
ダウンロードしたファイルを解凍し、restables.min.jsをサーバーにアップロードします。
jQueryとプラグインファイルのロード
HTML内でjQueryとプラグインファイルをロードします。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="restables.min.js"></script>
記述する場所は、<head>～</head>内もしくは</body>の直前でOKです。
テーブルとスクリプトの記述
テーブルは、特に意識せずにマークアップして大丈夫です。デモにあるテーブルは、以下のようにオーソドックスなものです。
<table> <thead> <tr> <th>Position</th> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>CEO</td> <td>John</td> <td>Doe</td> <td>21</td> </tr> <tr> <td>Web developer</td> <td>John</td> <td>Smith</td> <td>33</td> </tr> <tr> <td>Designer</td> <td>Donna</td> <td>Evans</td> <td>29</td> </tr> </tbody> </table>
続いてスクリプトを記述します。
<script>
$(document).ready(function () {
$('table').resTables();
});
</script>
上記の場合は、すべてのテーブルにresTablesが適用されます。
特定のテーブルにのみ適用したい場合は、以下のようにクラスやIDを指定します。
<script>
$(document).ready(function () {
$('#basic-demo-table').resTables();
});
</script>
上記の場合、basic-demo-tableというIDが付与されたテーブルにのみ適用されます。
CSSの追加
仕上げに以下のCSSを追加します。
table.restables-clone {
display: none;
}
table.restables-clone tr:first-child td {
background: #f3f6fa;
}
@media (max-width: 991px) {
table.restables-origin {
display: none;
}
table.restables-clone {
display: table;
}
}
「table.restables-clone tr:first-child td」は、ブラウザの幅が狭くなった時のth部分の背景色です。ブラウザの幅が狭くなってテーブルが縦に並ぶ際に、thはtdに変換されるため「tr:first-child td」で指定しています。
あとがき
レスポンシブ対応のサイトでは、テーブルは頭を悩ませる要素だと思います。
先日、「レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法」というCSSで対処する方法を投稿しましたが、resTablesはまた違ったアプローチでの対処ですね。
レスポンシブ対応サイト制作時の参考になれば幸いです。