这按预期工作:
<!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
为什么这行不通，我该如何解决？
最佳答案
我找到了解决方案。我需要添加
table-layout:fixed
表格的样式。
关于html - 表格单元格 : white-space: nowrap + overflow:scroll = not working 中的水平滚动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37217704/