問題 × 解決策

これで解決、テーブルをスマートフォンの時に横スクロールにする設定方法

問題

スマートフォンの時にテーブルを横スクロールにしたい。

解決策

tableにdiv等の要素で囲い、cssでoverflow: auto; と white-space: nowrap; を設定する。

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

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

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

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

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

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

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

.twrapper{
overflow: auto; /* ① */
white-space: nowrap; /* ② */
}
  • overflowをautoに設定し、範囲外に出た内部の要素に対して、スクロールが出るようにします。
  • 囲っている要素内のテキストに対して折り返しをさせないようにします。

これで完了です。

DEMOはこちら

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

項目 項目 項目 項目 項目 項目 項目
項目2 内容 内容 内容 内容 内容 内容
項目2 内容 内容 内容 内容 内容 内容
項目2 内容 内容 内容 内容 内容 内容
項目2 内容 内容 内容 内容 内容 内容

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

16 − 11 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧