CSS｜横スクロールでテーブルのレスポンシブ対応

CSSで横スクロールでテーブルのレスポンシブ対応

テーブルに横スクロール機能をつけるのは実装が大変そうなイメージがあるかもしれませんが、実はブロックで囲んでCSSに2行追加するだけで実装できてしまいます。

では早速サンプルコードを見てみましょう。下記のような通常のテーブルに対して横スクロール機能を実装していきます。

<table>

    <tbody>

        <tr>

            <th>・・・</th>

            <th>・・・</th>

            <th>・・・</th>

        </tr>

        <tr>

            <td>・・・</td>

            <td>・・・</td>

            <td>・・・</td>

        </tr>

        <tr>

            <td>・・・</td>

            <td>・・・</td>

            <td>・・・</td>

        </tr>

    </tbody>

</table>

tableタグをdivで囲む

最初にテーブルを横スクロールするためのブロック枠を作成します。横スクロール機能が必要なテーブルをdivタグで囲みましょう。

divタグには横スクロールの命令を当てるためのクラス【 sc-table (任意)】を指定しておきます。

<div class="sc-table">

    <table>

        <tbody>

            <tr>

                <th>・・・</th>

                <th>・・・</th>

                <th>・・・</th>

            </tr>

            <tr>

                <td>・・・</td>

                <td>・・・</td>

                <td>・・・</td>

            </tr>

            <tr>

                <td>・・・</td>

                <td>・・・</td>

                <td>・・・</td>

            </tr>

        </tbody>

    </table>

</div>

html側の準備はこれだけです。

cssにスクロールを指定

テーブルタグを囲むdivタグに当てたクラスにCSSで横スクロールの機能を指定していきます。それぞれの指定の意味は下記の通り。

• 1行目： ボックスの範囲内に内容が収まらない部分の表示をx方向（横）スクロールして表示
• 2行目： ボックスサイズに収まらない場合に自動改行しない

.sc-table {

    overflow-x: scroll;

    white-space: nowrap;

}

古いブラウザにも対応したい場合は下記の指定方法でも大丈夫です。

.sc-table {

    overflow: scroll;

    white-space: nowrap;

}

こちらで横スクロール機能の実装完了。横幅が狭くテーブルがはみ出した時、自動的に横スクロール機能が使えるようになります。

後は自分のサイトに合わせて自由に変更してください。

今日のdot

CSSによる横スクロール機能の実装はとても簡単だったと思います。テーブルのレスポンシブ対応は意外と苦労しますのでこちらの方法を覚えておくと良いでしょう。