テーブルのレスポンシブ対応

テーブルをレスポンシブ対応させる際、余白等を調整したり、セルをdisplay: block; にして積んだりするだけでなく、テーブルの項目数に応じて、スマートフォン時の見せ方を考える必要がありますよね。
特に項目数が多いと、スマートフォン用に強引にレイアウトを変更させようとすると、無理が出てきてしまいます。
その場合の選択肢として、「横スクロールにする」が出てきます。
今回はこの「横スクロールにする」ための設定方法をご紹介します。

テーブルをdiv等の要素で囲います。

テーブルをdiv等のブロック要素で囲います。（classは任意です。例として”twrapper”と設定しています）

<table>
...
</table>

<div class="twrapper">
<table>
...
</table>
</div>

囲った要素にCSSを設定します。

囲った要素に、以下のCSSを設定します。

.twrapper{
overflow: auto; /* ① */
white-space: nowrap; /* ② */
}

DEMOはこちら

実際にテーブルをスマートフォン時に横スクロールさせるはこちらです。
※実際にスマートフォンでご覧ください。