テーブルがはみ出る悩みを解決！CSSのoverflow-xで横スクロール可能な表を作る方法

横スクロール可能なテーブルの作成方法（overflow-x）

先生と生徒の会話形式で理解しよう

生徒

「Webサイトで大きな表を作ると、スマホの画面からはみ出して見えなくなってしまいます。どうすれば見やすくできますか？」

先生

「それはCSSのoverflow-x（オーバーフローエックス）という機能を使えば、表の部分だけを横にスライドできるように解決できますよ。」

生徒

「オーバーフローエックスですか？何だか難しそうな名前ですね……。」

先生

「大丈夫ですよ。考え方は『中身が入りきらない箱を、スクロールできるようにする』だけです。基本的な使い方を一緒に見ていきましょう！」

1. テーブルがはみ出る問題を解決する考え方

Webサイトで作成した表が画面からはみ出てしまう現象は、パソコンでは大丈夫でも、画面の小さいスマホで見ると非常によく起こる問題です。これは、表の横幅が画面の横幅よりも大きいためです。CSSのoverflow-xを使うと、表を専用の箱（コンテナ）の中に入れ、その箱からはみ出た分だけをスクロールバーで見られるようにします。これは、長い本を小さな窓から覗くようなイメージで、Webデザインにおいてスマホ対応（レスポンシブデザイン）を行う際の非常に一般的な解決策です。

2. overflow-xの基本的な仕組み

CSSのoverflow-xプロパティは、要素の内容が指定した幅からはみ出した時に、どう表示するかを決めます。これに「auto（オート）」を指定すると、はみ出た時だけ自動的にスクロールバーを表示してくれます。初心者が最初に覚えるべき最も大切なCSSの調整術です。まずは、表を囲むdivタグを用意し、そこにスタイルを適用するのが基本となります。


<style>
    .scroll-box {
        overflow-x: auto;
    }
</style>

<div class="scroll-box">
    <table class="table table-bordered">
        <tr>
            <td>項目1</td>
            <td>項目2</td>
            <td>項目3</td>
            <td>項目4</td>
        </tr>
    </table>
</div>

ブラウザ表示

3. スクロールバーを見やすく調整するコツ

ただスクロールできるようにするだけでなく、少しデザインを工夫するだけで、スマホユーザーに親切な表になります。例えば、表の周りに少し余白を持たせたり、スクロールできることがわかるような影（シャドウ）をつけたりします。Bootstrapなどのフレームワークを使っている場合は、classを付けるだけで簡単に整った見栄えにすることも可能です。


<style>
    .table-container {
        overflow-x: auto;
        padding-bottom: 10px;
    }
</style>

<div class="table-container">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th><th>名前</th><th>住所</th><th>電話番号</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td><td>山田太郎</td><td>東京都渋谷区</td><td>090-0000-0000</td>
            </tr>
        </tbody>
    </table>
</div>

ブラウザ表示

4. 最小横幅を指定して崩れを防ぐ方法

表の内容があまりにも短いと、横スクロールさせたくないのにスクロールバーが出てしまうことがあります。これを防ぐには、表に対して「min-width（最小横幅）」を指定します。これにより、一定の幅までは普通に表示し、画面がそれより小さくなった時だけスクロールバーが現れるようになるため、見た目が非常に安定します。


<style>
    .responsive-table {
        min-width: 600px;
    }
</style>

<div style="overflow-x: auto;">
    <table class="table responsive-table">
        <tr>
            <td>左端</td>
            <td>中央</td>
            <td>右端（はみ出る要素）</td>
        </tr>
    </table>
</div>

ブラウザ表示

5. なぜoverflow-xを使うことがSEOに重要なのか

Googleなどの検索エンジンは、「ユーザーにとって見やすいサイト」を高く評価します。もし表が崩れて文字が重なったり、画面からはみ出したりしていると、ユーザーは「このサイトは見づらい」と判断してすぐに離脱してしまいます。これは検索順位にとってマイナスです。CSSで適切に横スクロールを設定し、どの端末からでも情報が正しく読めるようにすることは、WebマーケティングやSEO対策において非常に重要です。

6. スマホで見やすい表の構成を考えよう

そもそも、スクロールさせる必要がある表は本当に必要でしょうか。スマホで見るときは、できるだけスクロールさせずに情報を伝えたいものです。本当に重要なデータだけを抜き出して表にしたり、行と列を入れ替えて縦長に見せる工夫をしたりすることも大切です。overflow-xによる横スクロールはあくまで「最後の手段」として考え、まずは情報を整理して、なるべくスクロールしなくて済むように構成を見直すことも忘れないようにしましょう。

7. パソコン初心者でも失敗しない実装手順

プログラムを触ったことがない方がこの設定をする際、最も大切なのは「囲うこと」です。tableタグを直接CSSで操作しようとせず、必ずdivなどの親タグで囲み、その親タグにoverflow-x: autoを設定してください。これが守られていれば、誰でも綺麗に横スクロールする表が作れます。まずはこの基本をコピペして、自分のWebサイトでテストしてみてください。


<style>
    .my-table-wrapper {
        overflow-x: auto;
        border: 1px solid #ccc;
    }
</style>

<div class="my-table-wrapper">
    <table class="table">
        <tr>
            <td>スクロール</td>
            <td>できる</td>
            <td>表が</td>
            <td>ここに</td>
            <td>完成です</td>
        </tr>
    </table>
</div>

ブラウザ表示

8. デザインを整えてプロ並みの表を目指す

最後の一歩として、表の枠線や背景色を整えると、グッとプロっぽくなります。overflow-xでスクロールする設定をしていても、中の表が質素すぎるとユーザーは読み飛ばしてしまいます。Bootstrapなどのライブラリを活用して「table-striped」や「table-hover」といったclassを追加すると、視覚的にも洗練された表が出来上がります。技術は工夫次第でどんどん楽しくなりますので、ぜひ自分好みの表にアレンジしてみてください。

2026年最新スキルアップ・実践セミナー