スマホで表（テーブル）がはみ出すときの簡単な直し方

スマホでホームページを見ると、

こんな悩みはとても多いです。

実際に、パソコンではきれいに見えるのに、スマホだけ見づらくなるケースはよくあります。

この記事では、初心者の方でもすぐできるテーブルの直し方を分かりやすく紹介します。

特に最近は、スマホからのアクセスが多いので、ぜひ最後まで確認してくださいね！

スマホで表がはみ出してしまう原因

まずは、「スマホで表がはみ出してしまう原因」からお伝えします。

テーブルの横幅を固定している

次のように幅を決めていると、スマホ画面に入りません。

table {
  width: 800px;
}

パソコン用に作ったままだと、スマホでは必ずはみ出します。

列が多すぎる

項目が多い表は、どうしても横に広くなります。
そのまま表示すると、スマホで見たときに崩れてしまいます。

文字が長くて折り返されない

長い文章やURLが入っていると、横幅が広がってしまうので、注意が必要です。

まず確認したい基本ポイント

それでは、「まず確認したい基本ポイント」をお伝えします。

widthが固定になっていないか

CSSやHTMLで、px指定になっていないかチェックしましょう。

横幅をpxで指定していると、スマホで見たときに横に広がってしまいます。

スマホで実際に確認する

パソコンだけでなく、スマホ表示で必ず確認することが大切です。

特に最近は、スマホからのアクセスがとても増えているので、必ずスマホでホームページの表示を確認するようにしましょうね。

すぐできる簡単な直し方（初心者向け）

ここでは、「すぐできる簡単な直し方」をお伝えします。

横スクロール対応にする（一番簡単）

まずは一番簡単な方法からご紹介します。

下記のように、HTMLでテーブルを囲みます。

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>

そして次に、CSSを追加します。

.table-wrapper {
  overflow-x: auto;
}

これだけで、スマホでも崩れずに見れるようになります。

テーブル幅を100%にする

table {
  width: 100%;
}

テーブル幅を100%にすると、画面サイズに合わせて縮みます。

文字を折り返す

td {
  word-break: break-word;
}

長い文字も自動で改行されます。
長い文字が入っているときは、必ず入れるようにしましょう。

より見やすくする工夫

ホームページを「より見やすくする工夫」について、お伝えします。

スマホでは縦並びにする

項目名と内容を縦に並べると、スマホではとても見やすくなります。

実際、スマホは画面サイズ（特に横幅）が小さいので、コンテンツを縦に並べるようにしましょう。

不要な列を減らす

スマホでは、必要な情報だけにしぼるのも大切です。

スマホは画面が小さいので、あまり多すぎる情報は読んでもらえなくなるからです。

よくある失敗例（スマホで表がはみ出すとき）

スマホ対応をしようとして、逆に見づらくしてしまうケースもよくあります。
ここでは、特に多い失敗を紹介します。

無理やり縮めて文字が読めなくなる

「はみ出すなら小さくすればいい」と思って、
フォントサイズやテーブル全体を極端に小さくしてしまう人が多いです。

たしかに画面には収まりますが、
文字が小さすぎて読めなくなってしまっては意味がありません。

スマホでは見やすさを最優先にしましょう。

一部だけ直して他の表が崩れたまま

1つの表だけ対応して、「これでOK」と思ってしまうケースも多いです。

実際には、他のページや別の表はそのままはみ出していることがよくあります。
スマホ対応は、サイト全体をチェックすることが大切です。

横幅を固定したままにしてしまう

CSSで、

width: 800px;

のような指定を残したままだと、
どれだけ調整してもスマホでははみ出し続けます。

まずは固定幅を使っていないか確認することが重要です。

表の情報量を減らさず詰め込みすぎる

スマホ画面は小さいので、
パソコンと同じ情報量をそのまま表示しようとすると無理が出ます。

必要な情報だけにしぼったり、
縦並びにする工夫をすると見やすくなります。

まとめ｜テーブルは少し工夫すればスマホでも快適に見られる

「スマホで表（テーブル）がはみ出すときの簡単な直し方」のコンテンツはいかがでしたでしょうか？

スマホで表がはみ出す原因の多くは、

• 幅の固定
• 列の多さ
• 文字の長さ

です。

そこで、まずは、

これを実施するようにしてください。

そうすれば、ほとんどの問題は解決できますよ！

スマホが普及した現在、パソコンの表示だけでなく、スマホでの表示も気にする必要が出てきたため、大変ではありますけど、、、

スマホでもホームページを見やすくすることはとても大切なので、ぜひこの記事を参考にしてくださいね！