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)