レスポンシブデザインにおいてtableの対応は、悩ませる要素の一つです。
display:blockにして縦並びにしたりもありますが、rowspanなどが必要なときはこの方法は有効ではありません。
結局簡単なのは、スマホサイズ時は、スクロールさせることではないでしょうか。
以下に簡単な記述を記したいと思います。
See the Pen YGNEob by funclur (@funclur) on CodePen.
手順
- 1.tableを包んだ要素にoverflow-x: scroll;
- 2.tableに任意のwidthを指定