---
title: "表（table）が画面からはみ出すときの対処"
description: "PCでは収まる表がスマホでレイアウト全体を崩してはみ出す問題を、overflowやレスポンシブ向けのCSS手法で解決したい人向けに、列の多い表を破綻させない具体策を整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/table-overflow"
markdown: "https://giga-site.com/articles/table-overflow/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 表（table）が画面からはみ出すときの対処

PC では収まっていた表が、スマホでは画面の幅を超えてはみ出し、レイアウト全体まで崩してしまう。table は内容に応じて幅が広がりやすく、狭い画面と相性が良くありません。この記事では、列の多い表を破綻させずに見せるためのレスポンシブテーブルの基本的な考え方と作り方を整理します。

> Source HTML: https://giga-site.com/articles/table-overflow
> Article index: https://giga-site.com/articles/index.md

## 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 が残らないようにできます。

## よくある質問

### tableが画面からはみ出してページ全体が崩れます。

table を div で囲み、その div に overflow-x: auto を指定すると、収まらないときだけ表の中で横スクロールが出て、ページ全体の崩れを防げます。まずこの横スクロールラッパーから試すのが手堅いです。

### 横スクロール以外でスマホに表を収める方法はありますか。

各行を縦並びのカードにする、重要度の低い列を非表示にして要点だけ残す、といった方法があります。データの主従を整理し、行と列の対応が伝わることを優先してください。

### セルの中で文字が改行されず横に伸びてしまいます。

長文や URL などのセルに word-break や折り返しの指定を加えると、無限に横へ伸びるのを抑えられます。固定値の列には適切な幅指定も併用してください。

### 比較表のような数値表でも折り返したほうがよいですか。

行と列の対応が重要な数値表は、無理に折り返すより横スクロールで全体を保ったほうが読みやすいことが多いです。見出し列の固定やスクロール可能を示す影を足すとさらに親切です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [長い英数字・URLがはみ出して折り返さないときの対処](https://giga-site.com/articles/long-text-overflow-no-wrap/index.md)
- [幅指定したのに要素がはみ出すときの対処（box-sizing）](https://giga-site.com/articles/box-sizing-width-overflow/index.md)
- [overflow:hiddenで中身が切れて見えないときの対処](https://giga-site.com/articles/overflow-hidden-content-cut/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "表（table）が画面からはみ出すときの対処",
  "description": "PCでは収まる表がスマホでレイアウト全体を崩してはみ出す問題を、overflowやレスポンシブ向けのCSS手法で解決したい人向けに、列の多い表を破綻させない具体策を整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/table-overflow",
  "url": "https://giga-site.com/articles/table-overflow",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "tableが画面からはみ出してページ全体が崩れます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "table を div で囲み、その div に overflow-x: auto を指定すると、収まらないときだけ表の中で横スクロールが出て、ページ全体の崩れを防げます。まずこの横スクロールラッパーから試すのが手堅いです。"
      }
    },
    {
      "@type": "Question",
      "name": "横スクロール以外でスマホに表を収める方法はありますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "各行を縦並びのカードにする、重要度の低い列を非表示にして要点だけ残す、といった方法があります。データの主従を整理し、行と列の対応が伝わることを優先してください。"
      }
    },
    {
      "@type": "Question",
      "name": "セルの中で文字が改行されず横に伸びてしまいます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "長文や URL などのセルに word-break や折り返しの指定を加えると、無限に横へ伸びるのを抑えられます。固定値の列には適切な幅指定も併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "比較表のような数値表でも折り返したほうがよいですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "行と列の対応が重要な数値表は、無理に折り返すより横スクロールで全体を保ったほうが読みやすいことが多いです。見出し列の固定やスクロール可能を示す影を足すとさらに親切です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```