【HTML&CSS】tableに横スクロールを実装する(スマホ対応) | (overflow, overflow-x)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、tableに横スクロールを実装する(スマホ対応)方法について解説していきます。

1 tableに横スクロールを実装する(スマホ対応) SampleCode
- 1.1 実装ポイント
- 1.2 【注意点】tableにoverflowを設定してもスクロールバーは表示されない
2 おすすめ書籍(HTML&CSS編)
3 Twitterやってます！Follow Me！
4 参考・引用
5 最近の投稿

tableに横スクロールを実装する(スマホ対応) SampleCode

SampleCodeを実行すると、次のような横スクロールTableが出現します。

実装ポイント

実装ポイントは、次のとおりです。

tableタグを divタグ(wrapper)で包み divタグに overflow または overflow-x を設定する
tableタグに、table-layout: fixed; をあてて、テーブル（表）の列幅を固定レイアウトにする
tableタグにスマホ用のStyleとして -webkit-overflow-scrolling: touch; を設定する
tdタグ (セルデータ)の幅を設定する( 今回は width:250px; )
tdタグ()にセルデータの折り返し設定をする

<style>
    .table-wrapper {
        /* wrapperで overflow設定をする */
        overflow: scroll;

        /* Table表示する画面幅を指定する */
        max-width: 800px;
    }
    table {
        /* Tableの画面幅の割合 */
        width: 100%;

        /* テーブル（表）の列幅を固定レイアウトにする */
        table-layout: fixed;

        /* 境界線のデザイン Ver.1 */
        border-collapse: separate;

        /* 境界線のデザイン Ver.2 */
        /* border-collapse: collapse; */

        /* スマホで滑らかにスクールする */
        -webkit-overflow-scrolling: touch;
    }

    table td {
        width:250px;

        /* セルデータの折り返し設定 */
        white-space: pre-line;
    }
</style>
<div class="content">
    
    <h1>Table-Overflow-X</h1>

    <div class="table-wrapper">
        <table border="1">
            <thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                    <td>神聖グンマー帝国出身のロボ玉は、いつもぷるぷるしていて可愛いのである🔥</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>