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

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

スポンサードリンク
テーブルをレスポンシブ対応にしてくれるjQueryプラグイン「resTables」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 大量にアクセスを呼び込みザクザク稼げてしまう21世紀最強の無料ツールを発見!!
  • このエントリーをはてなブックマークに追加

resTablesは、テーブルをレスポンシブ対応にしてくれるjQueryプラグインです。ブラウザの幅が縮まると、横長のテーブルを縦に並べてくれます。

デモについては、プラグインの配布ページでご確認いただけます。

resTablesの使い方

プラグインのダウンロードと設置

プラグインの配布ページからファイルをダウンロードします。[Download .zip]をクリックすると、ファイル一式がダウンロードされます。

restables1

ダウンロードしたファイルを解凍し、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はまた違ったアプローチでの対処ですね。

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。