画面幅が狭い時にテーブル全体を横スクロールできるようにするテクニックです。レスポンシブ対応やデータ量の多い表で便利です。
| 名前 | メールアドレス | 電話番号 | 住所 | 備考 |
|---|---|---|---|---|
| 山田 太郎 | taro@example.com | 090-1234-5678 | 東京都新宿区1-2-3 | VIP顧客 |
| 佐藤 花子 | hanako@example.com | 080-9876-5432 | 大阪市北区4-5-6 | 新規 |
| 鈴木 一郎 | ichiro@example.com | 070-1111-2222 | 名古屋市中区7-8-9 | リピーター |
親要素にoverflow-x: auto;を指定し、テーブルにmin-widthを設定するのがポイント。スマホや小さい画面で横スクロールが発生します。white-space: nowrap;でセル内改行を防止。スクロールバーのカスタマイズも可能です。