IE中的Rowspan和colspan问题 [英] Rowspan and colspan problems in IE

问题描述

因此，我需要创建具有复杂的colspans和rowpans系统的表。您可以查看此处

So, I need to create table with complicated system of colspans and rowspans. You can look at that 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浏览器中，即使我设置所有单元格的宽度和高度（以像素为单位）。

It doesn't work right in IE even if I set width and height of ALL cells in pixels.

你可以看到，它应该如何处理这个screeshot。

You can see, how should it work on this screeshot.

小空间现在无所谓。我将背景设置为粉红色并添加了黑色边框以便更好地理解。

Small spaces don't matter now. I set background to pink and added black border for a better understanding.

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

How to fix BIG spaces and problems with rowspan/colspan system in IE?

推荐答案

将您的布局视为9列网格，其中内容跨越1,2或3列。然后使用浮点数：

Think of your layout as a 9 column grid where the content spans 1, 2 or 3 columns. Then use floats:

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

这篇关于IE中的Rowspan和colspan问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！