[CSS、スマホ、table]スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ！今度はスクロールだよ！

長々とタイトル書いてしまってごめんなさい。
要するに前にポストした記事の「スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ！」が以外にアクセス多いので別な方法も書いちゃおっかなー的なポストです。

前回の方法はテーブルが複雑になるとどうしていいか分からないのがネックです。
ていうか意味が分からないテーブルになりかねない・・・
そこで今回はテーブルの形は崩さずに滑らかにスクロールさせてやろうってことです。

デモ！

html

まずは適当にテーブル書きます。
適当にテーブル書くときにクラスt-scroll(任意のクラス名)でくくってあげます。

<div class="t-scroll">
    <table>
        <tr>
            <th>-</th>
            <th>項目01</th>
            <th>項目02</th>
            <th>項目03</th>
            ・
　　　　　　・
　　　　　　・
            <td>001</td>
            <td>001</td>
            <td>001</td>
            <td>001</td>
        </tr>
    </table>
</div>

css

table {
    border-collapse: collapse;
    width: 800px;
}
th, td {
    border: 1px solid #888;
    text-align: center;
}
th {
    background: #eee;
}
@media only screen and (max-width: 800px) {
    .t-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 20px 0;
    }
}

ポイントはテーブルの幅が800pxなのに対して@mediaのmax-widthも800pxにしてあるところです。
画面が800px以下(テーブルより小さいサイズ)になったら横スクロールしてねってことです。
なのでテーブルの幅に合わせてあげればいいですね。

それと忘れちゃいけないのが「-webkit-overflow-scrolling: touch;」。
これでiOSでもスムーズにスクロールします。

まとめ

前回のポストはcolspanやrowspanがあったりした場合どうやって対処したら分からなかったけど、今回のはそんなこと気にする必要はないですね。