スマホサイトでtableなど幅が画面からはみ出したエリアを横スクロールで表現するCSS

iPhoneやAndroidなどスマフォサイトでtableを閲覧する場合に、以下のように横にボリュームが大きいと表示崩れが発生する場合があります。

dummy	dummy	dummy	dummy	dummy	dummy
dummy	dummy	dummy	dummy	dummy	dummy

この問題の回避策のひとつとして、横スクロールさせる方法があります。

スマフォブラウザではframe、iframe要素などでスクロールバーを表示させない仕様ですが、
実は、スタイルで指定してあげれば、スクロールバーが表示されなくとも、スクロール操作は可能なのです。

<div class="section">
<div class="table_wrap">
<table>
<tr><th>dummy</th><th>dummy</th><th>dummy</th><th>dummy</th><th>dummy</th><th>dummy</th></tr>
<tr><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td></tr>
</table>
</div>
</div>

.section{
	overflow: hidden;
}
.section .table_wrap{
	overflow-x: auto;
}

以下、実際にスタイルを適応した例です。
スマフォで確認してみてください。いかがでしょうか？

「overflow: hidden;」の指定については、table_wrapより上層のタグであれば、どこで指定してもかまいません。
つまり、既存マークアップに影響がないところで指定してもらえればいいし、既に「overflow: hidden;」を指定してあるタグがあれば、追記する必要はありません。