makurazaki.org
[CSS、スマホ、table]スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ!今度はスクロールだよ! | Maku_zin Ver2.1.1
長々とタイトル書いてしまってごめんなさい。 要するに前にポストした記事の「スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ!」が以外にアクセス多いので別な方法も書いちゃおっかなー的なポストです。 前回の方法はテーブルが複雑になるとどうしていいか分からないのがネックです。 ていうか意味が分からないテーブルになりかねない・・・ そこで今回はテーブルの形は崩さずに滑らかにスクロールさせてやろうってことです。 デモ! html まずは適当にテーブル書きます。 適当にテーブル書くときにクラスt-scroll(任意のクラス名)でくくってあげます。 css ポイントはテーブルの幅が800pxなのに対して@mediaのmax-widthも800pxにしてあるところです。 画面が800px以下(テーブルより小さいサイズ)になったら横スクロールしてねってことです。 なのでテーブルの幅に合わせてあげればいいですね。 それと忘れちゃいけないのが「-webkit-overflow-scrolling: touch;」。 これでiOSでもスムーズにスクロールします。 まとめ 前回のポストはcolspanやrowspanがあったりした場合どうやって対処したら分からなかったけど、今回のはそんなこと気にする必要はないですね。