ITエンジニア/デザイナ向けにオープンソースを毎日紹介

レスポンシブデザインを使う際にぜひ!

最近はWebデザインをレスポンシブに行うことが増えていますが、その最大の問題とも言えるのがテーブルではないでしょうか。特に業務系システムで多数のカラムがあったりすると大変なことになります。

もし自分たちのサイトにレスポンシブなテーブルを組み込まなければならないとしたらjQuery ReStableをチェックしてみてください。テーブルのデータによるかも知れませんが、解決につながる可能性があります。

例えばデスクトップでは以下のような表示です。

デスクトップ。
デスクトップ。

それをスマートフォンサイズまで縮めると次のように縦になります。

スマートフォン。
スマートフォン。

こちらはカラムのヘッダーが右側に並ぶパターン。
こちらはカラムのヘッダーが右側に並ぶパターン。

HTMLは下のように普通のテーブルです。

<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>

そこに$.ReStable()を実行するだけです。

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

$('#table2').ReStable({
    rowHeaders : false
});

通常は行の一番左側のカラムの値が左に並びますが、rowHeadersをfalseに設定するとtheadの内容が左側に並ぶようになります。いずれにしてもデータは縦に並ぶので一覧性は落ちますが、よりデータが確認しやすい方を選択するのが良いでしょう。

また、特別な設定を行うことなくレスポンシブに展開できるのが手軽で良さそうです。

jQuery ReStableはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

jQuery ReStable - Responsive tables to list jquery plugin

micc83/ReStable

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2