HTML, CSS でTableが画面に収まらない場合は横スクロールで表示する方法

✏️️ 2019/08/22 👍️2019/08/22 🔗

Tableが画面に収まらない場合は横スクロールで表示するようにします。

table {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

table セレクターに対し、上記のプロパティを付与します。

  • overflow-x: scroll ; : 要素がボックスからはみ出した場合スクロールにします。
  • -webkit-overflow-scrolling: touch;: iOSで惰性でスクロールさせるようにします。

参考

Akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。