将长HTML表包装到下一行

前端之家收集整理的这篇文章主要介绍了将长HTML表包装到下一行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
(我发现 thisthis,但它们是关于包装长话)

我有这样一张桌子:

@H_404_4@<table id="myTable" width="100%" border="5" style="table-layout:fixed"> <tr> <td><img src="photo1"></td> <td><img src="photo2"></td> <td><img src="photo3"></td> <td><img src="photo4"></td> <td><img src="photo5"></td> <td><img src="photo6"></td> </tr> </table>

如果用户的屏幕宽度很小,我需要换行.
我需要包装列并获得如下的表结果:

添加了style =“table-layout:fixed”但这使得表格宽度恰好为100%,但是图像会自动拉伸到一半以适应屏幕宽度.

如何将列发送到下一行?

@H_404_14@解决方法
您需要决定的是下一行在下一行流动时会发生什么行为.是否添加了新的孤立行,即: @H_404_4@#container { width: 95%; max-width: 646px; margin: 10px auto; border: 5px solid black; padding: 5px; } #container .row { border: 1px solid green; border-left: 0; border-top: none; margin: 0; padding: 0; } #container br { clear: both; } #container .block { border: 1px solid blue; border-bottom: 0; border-right: 0; float: left; width: 128px; } <div class="row"> <div class="block"> <img src="http://goo.gl/UohAz"/> </div> <div class="block"> <img src="http://goo.gl/UohAz"/> </div> <div class="block"> <img src="http://goo.gl/UohAz"/> </div> <div class="block"> <img src="http://goo.gl/UohAz"/> </div> <div class="block"> <img src="http://goo.gl/UohAz"/> </div> <br/> </div>

http://jsfiddle.net/userdude/KFFgf/

你会看到溢出成为一个新行,右边是剩余的空白区域.

如果您只想要一个“滚动”块,您可以:

http://jsfiddle.net/userdude/KFFgf/1/

行只是在流量中阻塞.你可以把< br />如果需要,在那里创建标记的硬标记.不确定这是否有帮助,并且没有在浏览器之间进行测试,但这就是我认为您的想法.

猜你在找的HTML相关文章