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

これをスマホで表示させた場合、画面に入りきらない部分はスクロールさせて表示することができる。