CSS : レスポンシブ対応の横スクロールするテーブルを作る

横長のテーブルをスマホなど狭い範囲で表示すると下の画像のように縦長になります。

これを回避してテーブル内で横スクロールを発生させることができます。
以下サンプル。

See the Pen Responsive Table by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML

<div class="scroll-table">
  <table>
    〜
  </table>
</div>

従来のテーブルはそのままに <div> で囲むだけの調整を加えます。

CSS

.scroll-table {
  overflow: auto;
  white-space: nowrap;
}

要は overflow: auto; と white-space: nowpra; の2点だけです。
これで横幅が狭い時にスクロールするテーブルにすることができます。

サンプルではデザインを整えるCSSも入れているので参考にどうぞ。