こんにちは、フリーランスエンジニアの太田雅昭です。

実機でスクロールが効かない問題

Web開発においてPCとスマホの表示確認は極めて重要です。PCでは意図した表示になっており、ブラウザのDevツールで横幅をスマホに合わせても問題なし。しかしながら、スマホ実機では表示がズレてしまう。こうした事象は開発現場では日常茶飯事です。

今回、Tableの横幅を長くし、wrapperで囲ってスクロール可能にしていた実装がありました。

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
        <th>項目3</th>
        <!-- ... -->
      </tr>
    </thead>
    <tbody>
      <!-- テーブルの内容 -->
    </tbody>
  </table>
</div>

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

しかしながら、スマホ iPhone8の実機（あるいはXCodeのシミュレータ）ではなぜかスクロールできないという事態に直面しました。

原因の解説

この問題が発生する主な原因は、テーブルの幅が親要素の幅に自動的に収まろうとするという、テーブルのデフォルト動作にあります。

overflow-x: autoを指定しても、内部のテーブルが「私は親要素の幅に収まります」と主張してしまうため、スクロール領域が発生しないことがあります。

解決方法

.table-wrapper {
  overflow-x: auto;
  min-width: max-content; /* または具体的な値（例: 800px） */
}

min-width: max-contentを指定することで、テーブルがコンテンツの幅を保持し、縮小されないようになります。