スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

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

update : 2015/05/18

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;
}

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

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

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

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives