スマホ版webページで表(table)がはみ出す時にスクロールできるようにする

このページで表(table)を載せたかったけど、そのままtableタグを入れるだけだと
スマホ版表示でレイアウトが崩れまくってしまった。
いくつか対処法は考えられたけど、表をそのまま表示したかったので
はみ出る部分はスクロールできるようにした。

PCだとChrome,Firefox。スマホはiPhoneのGoogleとSafariで動作確認済み。
html

divタグにクラスを設定しておく。

css

div要素のscrollクラスに下記を追加する。