スマホで表がはみ出す？CSSで横スクロール表示にする方法

2025年7月23日

スマホで表が見づらい… そんなときに

商品のスペック比較表やサービスの料金一覧、施設の空き状況など、横に情報が多く並ぶ表をページに掲載するケースは多くあります。

このような表は、スマートフォンで閲覧するといくつかの問題が発生しがちです。

よくあるのは、表の幅が画面よりも広くなってしまい、右側が見切れてしまうケース。左右にスクロールもできず、重要な情報が見えない状態になることがあります。

はみ出して不格好。。

また、横幅100%（width: 100%）で画面内に収めている表であっても、列が多いとスマホ画面に収まりはするものの、1セル内の文字が不自然に折り返されてしまうことがあります。これにより、見た目がごちゃついたり、読みづらく感じられる原因にもなります。

細く詰まってしまい読みづらい。。

いずれのケースでも、訪問者が情報をスムーズに把握できない状態となり、ページの価値が下がってしまう可能性があります。

この問題は、表全体をdivタグで囲み、CSSで「overflow-x」という指定を利用することで解決できます。

PAGEKitでは、HTML部分編集機能を使えば、この対応を簡単に実装できます。

編集画面で対象の表をドラッグして選択状態にし、「HTML部分編集」をクリックします。

HTML部分編集の画面で、表（tableタグ）の外側に次のようなdivタグを追加します。

< div style="overflow-x: auto; white-space: nowrap;" >
< table >
...表の中身...
< /table >
< /div >

overflow-x: auto;という記述により、表が画面からはみ出した場合に横スクロールが表示されるようになります。

また、white-space: nowrap; を指定することで、テーブル全体を1行で表示し、折り返しを防ぎます。

編集内容を保存したら、スマートフォンやブラウザのデベロッパーツールで確認しましょう。

表が左右にスクロールできるようになっていれば成功です。

表だけが横スクロール可能に！

表が途中で見切れてしまうと、ユーザーの離脱や誤解の原因になります。

今回ご紹介したように、CSSを使って横スクロールを実装すれば、見やすさも情報伝達もぐんと向上します。

PAGEKitの「HTML部分編集」機能とCSSを活用して、より快適なページ作りを目指しましょう。

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？