テーブルをレスポンシブ対応にしてくれるjQueryプラグイン「resTables」

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はまた違ったアプローチでの対処ですね。

レスポンシブ対応サイト制作時の参考になれば幸いです。

テーブルをレスポンシブ対応にしてくれるjQueryプラグイン「resTables」