将长 HTML 表格换行到下一行 [英] Wrap long HTML tables to next line

查看：96
本文介绍了将长 HTML 表格换行到下一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

(我找到了 this 和 this 但它们是关于包装长词)

我有一张这样的桌子:

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

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

我添加了 style="table-layout:fixed" 但这使表格宽度正好为 100%，但图像会自动拉伸到一半以适应屏幕宽度.

如何将列发送到下一行?

解决方案

您需要决定的是下一行在向下流动时会发生什么行为.是否添加了一个新的孤立行，即:

#container {宽度:95%；最大宽度:646px；边距:10px 自动；边框:5px纯黑色；填充:5px；}#container .row {边框:1px纯绿色；左边界:0；边框顶部:无；边距:0；填充:0；}#容器 br {清楚:两者；}#container .block {边框:1px纯蓝色；边框底部:0；边界右:0;向左飘浮;宽度:128px；}<div class="row"><div class="block"><img src="http://goo.gl/UohAz"/>

<div class="block"><img src="http://goo.gl/UohAz"/>

<div class="block"><img src="http://goo.gl/UohAz"/>

<div class="block"><img src="http://goo.gl/UohAz"/>

<div class="block"><img src="http://goo.gl/UohAz"/>

<br/>

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

您会看到溢出变成了一个新行，右边有剩余空间和空格.

如果你只想要一个滚动"块，你可以:

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

行只是在流动中阻塞的地方.如果需要，您可以将 <br/> 标签放在那里以创建硬换行符.不确定这是否有帮助，也没有在浏览器上进行过测试，但我认为您是这么想的.

(I found this and this but they are about wrapping long words)

I have a table like this:

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

I need to wrap columns if user's screen width is small. I need to wrap columns and obtain a table result like this:

I added style="table-layout:fixed" but this made table width exactly 100%, but images were automatically stretched to half to fit them to screen width.

How can I send columns to next line?

解决方案

What you need to decide is what behavior happens with the next row as it flows down to the next. Is it adding a new orphaned row, ie:

#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/

You'll see the overflow becomes a new row with the leftover and blank space on the right.

If you just want a "rolling" block, you can:

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

Where the rows just block down in flow. You could put <br/> tags in there to create hard row breaks if necessary. Not sure if that helps and haven't tested across browsers, but that's what I think you have in mind.

这篇关于将长 HTML 表格换行到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆