CSS overflow - table(表)などを横へスクロールさせる

更新:

overflow を使ってtable(表)などを横へスクロールさせる。

table(表)などを横へスクロールさせる

スマホで大きい表を表示させる場合、Wikipedia では overflow を使ってスクロールできるようにしている。
<div style="overflow:auto;">
<table style="width:500px;">
(中略)
</table>
</div>
table を div で囲み、div に overflow:auto または overflow:scroll を指定する。
table には width を指定する。
tr や td だけに width を指定しても overflow は機能しない。
table を img などに置き換えて活用することもできる。


width を指定しない方法

基本的にブラウザはスクロールさせる領域のサイズが分からなければ overflow が機能しない。
ただ、white-space:nowrap を使用することで width を指定せずスクロールさせることができる。
HTMLは以下のようにする。
<div id="page_menu">
<a href="./menu1.html">メニュー1</a> -
<a href="./menu2.html">メニュー2</a> -
<a href="./menu3.html">メニュー3</a> -
<a href="./menu4.html">メニュー4</a> -
<a href="./menu5.html">メニュー5</a>
</div>
以下のようなスタイルを用意。
#page_menu {
	background-color: #f80;
	white-space: nowrap;
	overflow: auto;
}
これをスマホで表示させた場合、画面に入りきらない部分はスクロールさせて表示することができる。
このエントリーをはてなブックマークに追加