表（table）が画面からはみ出すときの対処

tableが画面からはみ出す仕組み

table は各列の内容に合わせて幅を確保しようとするため、列数が多かったり、長いテキストや改行できない値が入っていたりすると、画面幅を簡単に超えます。親に幅を指定しても、中身が押し広げてしまうのです。

はみ出した分はそのまま横に飛び出し、ページ全体に横スクロールを発生させてレイアウトを崩します。まずは「表を画面に押し込める」のか「表だけ横スクロールさせる」のか、方針を決めることが大切です。

もっとも手堅いのは横スクロールラッパー

実装が簡単で崩れにくい定番は、table を div で囲み、その div に overflow-x: auto を指定する方法です。画面に収まらないときだけ、表の領域内に横スクロールが出て、ページ全体は崩れません。

この方法は表の構造をそのまま保てるのが利点です。比較表や数値表のように行と列の対応関係が重要なデータでは、無理に折り返すより横スクロールで全体を保ったほうが読みやすいことが多いです。

スクロールできることが伝わるよう、端に影を付ける、見出し列を固定するなどの工夫を足すと、さらに親切になります。

症状別チェック表

表（table）が画面からはみ出すは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

レスポンシブ対応の手順

まずはラッパーで横スクロールを確保し、必要なら列の整理やカード化を検討する流れが扱いやすいです。

1. table 全体を div で囲み、その div に overflow-x: auto と max-width: 100% を指定する。
2. セル幅が極端に広がらないよう、長文セルに word-break や折り返しの指定を加える。
3. それでも情報量が多い場合は、スマホで重要度の低い列を非表示にするか優先順位を付ける。
4. 行ごとに項目名と値を縦に並べるカード型レイアウトへ切り替える案も検討する。
5. 狭い画面幅で、ページ全体ではなく表の中だけがスクロールするかを確認する。

横スクロール以外の見せ方

情報の性質によっては、横スクロールより別の見せ方が合うこともあります。スマホでは各行を一枚のカードにし、項目名と値を縦に並べると、横スクロールなしで読み切れます。

また、すべての列を常に見せる必要があるとは限りません。要点となる列だけを残し、詳細は別画面や展開表示に逃がすと、狭い画面でも見やすくなります。データの主従を整理するのが鍵です。

どの方法でも、行と列の対応関係が読み手に伝わるかを最優先に判断してください。見た目を整えるあまり、どの値がどの項目なのか分からなくなっては本末転倒です。

表の見え方を実機で確認してもらう

表のはみ出しは画面幅に強く依存するため、いくつかの端末幅で実際に見てもらうのが確実です。レビュー相手のスマホやタブレットで、横スクロールやカード表示が意図どおり動くかを確かめてもらいましょう。

ギガサイト便なら、修正した HTML をドロップして発行された 〇〇.giga-site.com の URL を共有するだけで、相手は自分の端末で表をスクロールして確認できます。CDN のエッジ配信で表示が速く、確認のやり取りがスムーズです。

同じ URL のまま中身を差し替えられるので、列の出し分けやカード化を試すたびに新しいリンクを配る必要はありません。社外レビューでは認証方式や公開期限を設定して、確認用 URL が残らないようにできます。