はみ出たtableを横スクロールで滑らかに表示するCSS

たったの4行だけ

<table></table>に下記CSSを当てるだけ。

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

2行目： 隠れた部分をx方向（=横）にスクロールして表示する
3行目： 自動で改行しない（←必要であれば）
4行目： スマホで滑らかにスクールする

ただ、セルの幅が効かない

<table></table>に上記CSSを一括で当てると、予期せぬレイアウト崩れが起きる。
スクロールが必要ないテーブルの場合、セルは中身の幅にフィットした横幅までしか広がらないので、右側に空白が生まれてしまう・・・

解決策その１：tableをdivで囲む

スクロールが必要なテーブルだけに、CSSが当たるようにする。

.scroll-table table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

解決策その２：tbodyをテーブル要素とする

table下のtbodyをdisplay:table;でtable要素にすることで、幅を指定することができる。

table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
table tbody {
  width: 100%;
  display:table;
}