[JS]デスクトップ用に実装した表組みをスマフォでもいい感じに表示する超軽量のスクリプト -ReStable

デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。

既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。

ReStable
ReStable -GitHub

• ReStableのデモ
• ReStableの使い方

ReStableのデモ

デモはテーブルが二つ配置されており、デスクトップでの表示は同じですが、スマフォでの表示は2パターンあります。

デモページ：幅1,200pxで表示

タブレットサイズに変更してみます。
まぁ、このくらいのサイズだったら、デスクトップ時からちょっと縮めるくらいでいいでしょう。

デモページ：幅780pxで表示

スマフォサイズに変更してみます。
デモではブレイクポイントを480pxに設定してあります。

デモページ：幅480pxで表示

左：ヘッダ有り、右：ヘッダ無し
一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。

ReStableの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.restable.min.js"></script>
<link rel="stylesheet" href="jquery.restable.min.css">

Step 2: HTML

テーブルは通常通りのマークアップでOK。

<table class="mytable">
<thead>
    <tr>
        <td>Period</td>
        <td>Full Board</td>
        <td>Half Board</td>
        <td>Bed and Breakfast</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>01/10/12 - 02/10/12</td>
        <td>20 €</td>
        <td>30 €</td>
        <td>40 €</td>
    </tr>
    <tr>
        <td>03/10/12 - 04/10/12</td>
        <td>40 €</td>
        <td>50 €</td>
        <td>60 €</td>
    </tr>
    <tr>
        <td>05/10/12 - 06/10/12</td>
        <td>70 €</td>
        <td>80 €</td>
        <td>90 €</td>
    </tr>
</tbody>
</table>

Step 3: JavaScript

レスポンシブ対応にするテーブルをjQueryのセレクタで指定し、スクリプトを実行します。

$(window).ready(function () {
    $('.mytable').ReStable();
});

スクリプトのオプションでは、ヘッダの有無やブレイクポイントを設定できます。

$('.mytable').ReStable({
    rowHeaders: true, // ヘッダの有無
    maxWidth: 480 // レスポンシブ用のブレイクポイント
});