そんな時にオススメなのが、画面幅に合わせてtableのレイアウトを最適化してくれるプラグイン「ReStable」です。

これを使うと、例えば以下のように簡単にレイアウトを変更してくれます。

ReStable 画面幅ごとの表示例

通常時

ごくごく一般的なテーブルレイアウトですよね。
restable_01-max

幅を狭めた時

画面幅を狭めていくとテーブル幅も狭まっていきます。
restable_01-mid

スマホ最適化時

最終のブレークポイントを迎えるとスマホ用にレイアウトが変化します。
restable_01-min

上記のコード記述例

コードはいたってシンプルです。普通にbody内にtableを組みます。

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

で、head内にReStableプラグインのjsとcssファイル、それからjQueryファイルを読み込ませます。

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

あとは、プラグインを実行させるだけ。テーブルヘッダーを表の左側に表示させる方法もあります。

$(window).ready(function () {
    $('.mytable').ReStable({
    maxWidth: 480 // レイアウト変更のブレークポイント
    });
});

テーブルヘッダーを表の左側に配置させる例

このようなテーブルレイアウトがあったとします。
restable_02-mid

それをこんな感じに。
restable_02-min

こちらも記述は簡単。実行させるコードにrowHeaders : falseを追記するだけ。

$(window).ready(function () {
    $('#table2').ReStable({
    rowHeaders : false, // ヘッダーの有無
    maxWidth: 480 // レイアウト変更のブレークポイント
    });
});

簡単に実装できるだけでなく、ファイルサイズも1KBと軽量なのも魅力です。