パソコンでは問題なく表示されている表（テーブル）が、
スマホで見ると画面からはみ出してしまうことはとても多いです。
実際に、横スクロールが出てしまい、読みにくくなってしまうケースも少なくありません。
そこで、この記事では、スマホで表が崩れる原因と、すぐできるレスポンシブ対応の直し方を初心者向けに解説します。
表がはみ出してしまうと、表の右側が見れなくなってしまうので、ホームページに表を表示している場合は、必ず確認してくださいね。
スマホでテーブルがはみ出す主な原因
まずは、スマホでテーブルがはみ出す主な原因から見ていきましょう！
原因① 横幅が固定されている
テーブルに以下のような指定があると、スマホ画面より大きくなります。
table {
width: 600px;
}この状態だと、スマホでは確実にはみ出します。
原因② 列数が多すぎる
項目が多い表は、どうしても横幅が広くなります。
パソコン向けに作った料金表などは特に注意が必要です。
原因③ 親要素が狭い
テーブルを囲っているdivの幅やpaddingが原因で、はみ出すこともあります。
まずはこれで直る基本対処法（最重要）
次に、「まずはこれで直る基本対処法」をお伝えします。
横幅を100%にする
多くの場合、これだけで改善します。
table {
width: 100%;
}横スクロール対応にする（安全策）
情報量が多い表は、無理に縮めるより横スクロールが見やすいです。
.table-wrap {
overflow-x: auto;
}HTMLではテーブルを以下のように囲みます。
<div class="table-wrap">
<table>
<!-- 表の内容 -->
</table>
</div>状況別のおすすめ対応パターン
状況別のおすすめ対応パターンをご紹介します。
表を画面内に収めたい場合
・横幅を100%にする
・文字サイズを少し調整する
これだけで十分なことが多いです。
横スクロールで見せたい場合
項目が多い表は、この方法が一番安全です。
情報も見やすくなります。
内容を縦並びにしたい場合
スマホでは、
・項目名
・内容
を縦に並べるととても見やすくなります。
情報が多い場合におすすめです。
よくある失敗と注意点
よくある失敗と注意点としては、、、
❌ 固定幅を残したまま
❌ 無理に文字を小さくする
❌ テーブル構造をそのまま縮めようとする
これらは逆に見づらくなってしまいます。
スマホで見やすくするためのチェックポイント
調整後は、次のことを確認しましょう。
・横スクロールが出ていないか
・文字が読みにくくないか
・項目が重なっていないか
もちろん、実際にスマホで確認するのがおすすめですよ。
まとめ
「レスポンシブで表（テーブル）がはみ出すときの簡単な直し方」の内容はいかがでしたでしょうか？
スマホで表（テーブル）がはみ出す原因のほとんどは、
✔ 横幅の固定指定
✔ 情報量の多さ
このどちらかです。
そこで、まずは、
👉 widthを100%にする
👉 それでも無理なら横スクロール対応
この順番で対応すれば、ほぼ確実に改善できます。
私もtableタグをホームページでよく使っているので、表の表示にはかなり苦労しました。。。
でも、このページでお伝えしたことを実施すれば、スマホでもきれいに見れるようになるので、ぜひ参考にしてくださいね！
