大きなtableに横スクロールを表示する

iOS,Androidなどのスマホで、どうしても幅の大きいtableがある際の対応方法として、tableが表示領域よりも大きくなって収まらなくなったら横スクロールを表示させる方法があります。これの具体的な実装方法について。

iOSは楽ですがAndroidが面倒です。

CSSのみ(iOSのみ解決)

x-scroll_table01.html

white-space:nowrap;とoverflow:auto;を使っているだけですね。
-webkit-overflow-scrolling:touch;は一本指でスクロールできるようになるiOS5向けのプロパティです。

overflow-scrolling:touch;の問題

ただ-webkit-overflow-scrolling:touch;を使うと、「iOSで画面最上部をタップすることでページトップにスクロールする機能」が動かなくなってしまう問題がある。最新iOSでは改善されている模様。

  • iOS 5.1 再現する
  • iOS 6.0 再現する
  • iOS 7.0 再現する
  • iOS 7.1 再現しない。改善されている。
  • iOS 8.2 再現しない。改善されている。

jQuery.flickable

http://lagoscript.org/jquery/flickable (消滅?)

jQuery.flickableを導入すればAndroidでも横スクロールが可能になります。
ただし、jQuery1.7.1では動作せず、1.4.2なら動作しました。

今回のような状況の場合、横スクロールができるようになった代わりに縦スクロールは受け付けなくなってしまうので、それもデメリットだと言えます。

作者のブログのコメント欄で対処方法がいくつか挙がっているので気になる場合は参考にしてください。


最終更新: 2015-04-04 (土) 16:25:19