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)
ДИВ занимает 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
Почему это не работает и как его исправить?