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

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

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

デモ!

html

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

css

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

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

まとめ

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



スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク