読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

レスポンシブデザインにおいてtableの対応で最も簡単な方法

スポンサードリンク

レスポンシブデザインにおいてtableの対応は、悩ませる要素の一つです。

display:blockにして縦並びにしたりもありますが、rowspanなどが必要なときはこの方法は有効ではありません。

結局簡単なのは、スマホサイズ時は、スクロールさせることではないでしょうか。
以下に簡単な記述を記したいと思います。


See the Pen YGNEob by funclur (@funclur) on CodePen.

手順

  • 1.tableを包んだ要素にoverflow-x: scroll;
  • 2.tableに任意のwidthを指定