画面幅が狭い時にテーブル全体を横スクロールできるようにするテクニックです。レスポンシブ対応やデータ量の多い表で便利です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
テーブル自体は縮めず、ラッパー要素に overflow-x: auto を指定して「テーブルは本来の幅のまま、狭い画面でははみ出た分をスクロール」させる構成です。テーブル側の min-width が「これ以上は縮まない」基準になり、white-space: nowrap でセル内の不自然な折り返しを防ぎます。ラッパーに tabindex="0" と role="region" を付けると、キーボードでもスクロール操作ができます。
親要素にoverflow-x: auto;を指定し、テーブルにmin-widthを設定するのがポイント。スクロールできることが伝わるよう、端をグラデーションでぼかす等の視覚ヒントも有効です。
狭い画面で横スクロールできるレスポンシブなテーブルを作ってください。ラッパーにoverflow-x: autoとtabindex="0"、テーブルにmin-widthとwhite-space: nowrapを指定してください。