Html ColSpan / RowSpan无法按预期工作 [英] Html ColSpan/RowSpan not working as expected

问题描述

我正面临IE和Chrome上发生的一个奇怪的错误。我有和应用程序加载信息矩阵，但由于某种原因，在特定情况下事情不能正确显示。通过配置，我能够改变信息的显示方式，并使用rowspan和colspan。
我没有使用任何Javascript，只是HTML。这张图片展示了正在发生的事情：

抱歉，仍然无法发布图片，但这里是小提琴
http://jsfiddle.net/gondias/22o07mbt/

  < table cellspacing =6cellpadding =0style =width：558px; background-color：red> 
< tr> 
< td colspan =3rowspan =2> 
< div class =tile_3x2>< / div> 
< / td> 
< td colspan =1rowspan =2> 
< div class =tile_1x2>< / div> 
< / td> 
< / tr> 
< tr>< / tr> 
< tr> 
< td colspan =2rowspan =2> 
< div class =tile_2x2>< / div> 
< / td> 
< td colspan =2rowspan =2> 
< div class =tile_2x2>< / div> 
< / td> 
< / tr> 
< tr>< / tr> 
< tr> 
< td colspan =4rowspan =1> 
< div class =tile_4x1>< / div> 
< / td> 
< / tr> 
< tr> 
< td colspan =4rowspan =1> 
< div class =tile_4x1>< / div> 
< / td> 
< / tr> 
< / table> 
  

出于某种原因，第二行中的第一个单元格将被延伸，并推向下一个单元格。
让我知道您可能有任何问题。

我认为rowspan / colspan的用法是正确的。有谁知道这里发生了什么。
感谢您的帮助，我真的在这里苦苦挣扎。 解决方案

你真的需要在这里使用表吗？它是否用于电子邮件通讯？
您可以使用带有 display：inline-block; 的div来获得所需的结果而不需要表格。

<如果你真的需要这样做（不推荐），这是你的解决方案：

22o07mbt / 1 /rel =nofollow> http://jsfiddle.net/rcdmk/22o07mbt/1/

  td {
 width：132px; 
 
 
 
 $ b 
如果你在 TD上放置一个边界 code>标签，你会看到发生了什么。单元格（列）没有特定的宽度，因此浏览器必须根据内容进行猜测，这不是浏览器之间的一致行为。你将不得不给单元格宽度。
 
I am facing a strange bug that is happening on both IE and Chrome. I have and application that loads a matrix of info but for some reason in a specific case things dont show correctly. By configuration i am able to change the way the info is being displayed and for that i use the rowspan and colspan. 
I am not using any Javascript, just html. This image show what is happening:

Sorry still cant post image but here is the fiddle 
http://jsfiddle.net/gondias/22o07mbt/
<table cellspacing="6" cellpadding="0" style="width:558px; background-color:red">
    <tr>
        <td colspan="3" rowspan="2">
            <div class="tile_3x2"></div>
        </td>
        <td colspan="1" rowspan="2">
            <div class="tile_1x2"></div>
        </td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="2" rowspan="2">
            <div class="tile_2x2"></div>
        </td>
        <td colspan="2" rowspan="2">
            <div class="tile_2x2"></div>
        </td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="4" rowspan="1">
            <div class="tile_4x1"></div>
        </td>
    </tr>
    <tr>
        <td colspan="4" rowspan="1">
            <div class="tile_4x1"></div>
        </td>
    </tr>
</table>
For some reason the 1st cell in the second row gets extended pushing the following one.
Let me know of any questions you may have.

I think the usage of the rowspan/colspan is correct. Does anyone know what is happening here.
Thanks for the help, i'm really struggling here.
解决方案
Do you really need to use tables here? Is it used for an email newsletter?
You can use divs with display: inline-block; to get the desired result without a table.

If you really need to take this way (not recommended), this is your solution:

http://jsfiddle.net/rcdmk/22o07mbt/1/
td {
    width: 132px;
}
If you place a border on the TD tags you will see what's happening there. The cells (columns) doesn't have specific widths so the browser have to guess based on the content and this is not a consistent behavior between browsers. You will have to just give a width to the cells.

                        
这篇关于Html ColSpan / RowSpan无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！