IE中的行距和colspan问题

Question

所以，我需要创建具有colspans和rowspans的复杂系统的表。你可以看一下那个here

这是HTML：

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 900px;"> 
<tr> 
    <td colspan="3" rowspan="3" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="2" rowspan="2" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="2" rowspan="3" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="1" rowspan="1" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="1" rowspan="1" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg" style="width: 100%;" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="2" rowspan="2" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg" style="width: 100%;" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="2" rowspan="2" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg" style="width: 100%;" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="3" rowspan="2" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="2" rowspan="2" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="2" rowspan="1" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg" style="width: 100%;" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="2" rowspan="1" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg" style="width: 100%;" /> 
    </td> 
    <td colspan="2" rowspan="1" > 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg" style="width: 100%;" /> 
    </td> 
</tr> 

它不会在IE右键工作，即使我设置在像素ALL细胞的宽度和高度。

你可以看到，它应该如何在这个screeshot上工作。

狭小的空间并不重要了。我将背景设置为粉红色，并添加了黑色边框以便更好地理解。

如何修复IE中rowspan/colspan系统的BIG空间和问题？

Answer 1

认为你的布局为一个9列网格，其中所述内容涵盖1,2或3栏。然后使用花车：

#grid { 
 
    width: 900px; 
 
    overflow: hidden; 
 
} 
 
#grid div { 
 
    float: left; 
 
} 
 
#grid .col-3-9 { 
 
    width: 33.33%; 
 
} 
 
#grid .col-2-9 { 
 
    width: 22.22%; 
 
} 
 
#grid .col-1-2 { 
 
    width: 50%; 
 
} 
 
#grid img { 
 
    display: block; 
 
    width: 100%; 
 
}

<div id="grid"> 
 
    <div class="col-3-9"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg"> 
 
    </div> 
 
    <div class="col-2-9"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg"> 
 
    </div> 
 
    <div class="col-2-9"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg"> 
 
    </div> 
 
    <div class="col-2-9"> 
 
    <div class="col-1-2"> 
 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg"> 
 
    </div> 
 
    <div class="col-1-2"> 
 
     <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg"> 
 
    </div> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg"> 
 
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg"> 
 
    </div> 
 
</div>