tableをレスポンシブ・デザインで表示する方法

tableは横に長くならざるを得ません。大した長さでなければ、画面内に収まるようにするだけですが、画面内に納めると、セルが縦に間延びするような場合は、横にスクロールするようにします。

それには、tableをdivで囲んで、overflow-xの要素を適用し、autoの値を指定します。

tableをdivで囲んで、overflow-x:auto

tableをdivで囲んで、適当なクラスを割り当てます。scrolling-tableとか。そしてスタイルシートで指定する。

あるいは、下記のようにタグに直接書き込んでもいいかと思います。

<div style="overflow-x:auto;">
 <table>
(略)
 </table>
</div>

なんか、こっちの方が簡単そうですが、スタイルシートに書くか、headの中のstyleに書かないと、画面サイズにより最適な表示ならない場合があるので、スタイルシートまたはhead内のstyleに書いた方がいいです。

関連ページ:
How TO – Responsive Tables (W3schools.com)