0
を働いていないスクロールこれは期待通りに動作します：水平スクロールのdiv：ホワイトスペース：nowrap属性+オーバーフロー：=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%">
<div style="margin:0; padding: 0; width: 100%; overflow: auto; white-space:nowrap;">
<img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
<img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
<img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
... many more
</div>
<div>
Lorem ipsum dolor sit amet...
</div>
</div>
</body>
</html>
（ここでそれを試してください：http://output.jsbin.com/camoku）を
divが100％を占めていますオーバーフローするコンテンツをスクロールするための水平スクロールバーがあります。
私は、これは正確に同じように機能することを期待する：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%">
<table style="width:100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="margin:0; padding: 0; width: 100%; overflow: auto; white-space:nowrap;">
<img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
<img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
<img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
...
</div>
<div>
Lorem ipsum dolor sit amet...
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
しかし、これは動作しません。スクロールせずにテーブルを展開してすべてのコンテンツをホストします。 divにはスクロールバーがなく、代わりにページ全体があります。 http://output.jsbin.com/sagedu
なぜこれが機能しないのですか？どのように修正しますか？