overflow:hidden が指定された領域内に、幅の大きい table (表) を記述する

1. はじめに

本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「overflow:hidden」が指定されるようになっています（WordPress で使っているテーマでそうなっています）。この指定は「はみ出た部分は表示しない」という意味です。

このような状況で、記事の中に <table>タグを使って何か表を作り、その中身が画面幅に収まらない場合、表のはみ出た部分が見られなくなってしまいます。

例えば、こんな表です。

スマートフォンではみ出たところが見えない表

環境変数	値
HOMEPATH	\Users\{ユーザー名}
PATH	C:\Windows\System32\;C:\Windows\;C:\Windows\System32\Wbem;{各プログラムのパス}
USERNAME	{ユーザー名}
USERPROFILE	C:\Users\{ユーザー名}
WINDIR	C:\WINDOWS

スマートフォンで本ページを見た場合、この表は画面からはみ出てしまい（横方向）、そのはみ出た部分は見られなくなっているのではないでしょうか。

2. 対応策

このような場合は、<table>タグを、<div style="overflow:auto;"> というタグで囲んでみましょう。
これにより、はみ出した部分は横スクロールで見られるようになります。

<div style="overflow:auto;">
  <table>
  （省略します）
  </table>
</div>

先程の表に、この対応を行ったのが以下です。見た目は変わりませんが、スマートフォンでアクセスすると横スクロールができるようになっています。

3. おわりに

ブログを書くだけでも、いろいろと問題が起きるものです。
1つ1つ丁寧に解決していきましょう。