スマホ表示の崩れはなぜ起きるか——テーブル設計の罠と3つの解決策

# スマホ表示の崩れはなぜ起きるか——テーブル設計の罠と3つの解決策

Webのテーブルはスマホで崩れる。

これは半ば「常識」として受け入れられているが、なぜ崩れるのかを理解していれば防げる。

DX経営ゲームの全社比較テーブル（comp-table）は、PCでは美しく表示されるのにiPhone SEでは画面から大きくはみ出していた。原因を追いかけて、3つの解決策にたどり着いた。

テーブルが崩れる3つの原因

原因1：min-widthの設定

<table id="comp-table" style="min-width:400px">

min-width:400pxは「このテーブルは最低でも400pxの幅を確保する」という宣言だ。

iPhone SE（画面幅375px）では、コンテナが319px（左右のパディングを除く）になる。テーブルは400pxを要求するが、コンテナは319pxしかない——はみ出す。

overflow-x:autoを親に設定すれば横スクロールになるが、それは崩れを「隠した」だけで「解決した」ではない。

原因2：white-space:nowrapの展開

コードを詳しく見ると、会社名列にこんな設定があった。

return `<tr>
  <td style="white-space:nowrap">${name}</td>

white-space:nowrapは「折り返さない」という宣言。会社名が長い場合（例：「テスト商事株式会社」）、その文字列の幅でセルが展開される。

min-widthを320pxに下げても、会社名列が300px展開すれば合計は400px超えになる。テーブルは縮もうとしてもコンテンツが許さない。

原因3：列が多すぎる

DX経営ゲームのcomp-tableは9列あった。

| 会社名 | 価格 | 従業員 | 価格競争力 | ブランド | スピード | 供給力 | 総合 | シェア |

スマホで9列を表示しようとすれば、どうしても幅が必要になる。

解決策1：CSSでmin-widthを上書き

JavaScriptでインラインstyleとして設定されたmin-widthは、CSSの!importantで上書きできる。

@media (max-width: 400px) {
  #comp-table { min-width: 260px !important; }
}
@media (max-width: 370px) {
  #comp-table { min-width: 230px !important; }
}

画面幅に応じてmin-widthを段階的に縮める。!importantが必要なのは、インラインスタイルの方が通常のCSSより優先度が高いからだ。

解決策2：text-overflow:ellipsisで長い文字を切る

会社名列の展開を防ぐには、max-widthとtext-overflow:ellipsisを組み合わせる。

@media (max-width: 400px) {
  #comp-table td:first-child {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

「テスト商事株式会社」は「テスト商事株式…」と表示される。情報は省略されるが、崩れるよりはるかにマシだ。

解決策3：不要な列をモバイルで非表示にする

9列が多すぎるなら、スマホでは不要な列を隠す。

/* 400px以下：従業員数(3列目)・価格競争力(4列目)を非表示 */
@media (max-width: 400px) {
  #comp-table th:nth-child(3), #comp-table td:nth-child(3),
  #comp-table th:nth-child(4), #comp-table td:nth-child(4) {
    display: none;
  }
}
/* 370px以下：さらにブランド価値(5列目)も非表示 */
@media (max-width: 370px) {
  #comp-table th:nth-child(5), #comp-table td:nth-child(5) {
    display: none;
  }
}

Galaxy S21（360px）ではブランド列まで非表示になり、6列に絞られる。スマホで必要な情報は「誰が上位か（会社名）」「総合スコア」「シェア」——この3つで十分だ。

Playwrightで検証した結果

3つの解決策を組み合わせた後、Playwrightで確認した。

[iPhone_SE_375] comp-table: tableW=319, containerW=319, overflow=False ✅
[Galaxy_S21_360] comp-table: tableW=304, containerW=304, overflow=False ✅
[iPad_768] comp-table: tableW=712, containerW=712, overflow=False ✅
[Desktop_1280] comp-table: tableW=1224, containerW=1224, overflow=False ✅

4デバイスで全てゼロオーバーフロー。

「レスポンシブ」の本当の意味

レスポンシブデザインとは「端末に合わせて見た目が変わる」ことだ。

でも「変わる」の中身が重要で、「9列を全部詰め込もうとして崩れる」のは変わっているとは言えない。「スマホでは優先度の高い情報だけを見せる」のが本当のレスポンシブだ。

テーブルにはPCで見せるべき情報量とスマホで見せるべき情報量がある。それを設計段階で考えておくと、後から崩れを修正する手間がなくなる。

次に複数列のテーブルを作るときは、最初から「スマホでは何列必要か」を決めてから設計しよう。後付けの修正より、はるかに楽だ。