有没有解决方法可以让MS浏览器中的rowspan工作？

我有一个网页http://bikepaths.com/Armstead/GBA1.html，我已经建立了一个HTML表格来排列文本和图片，使用rowspan排列，这样第一列在高图片上方有少量文本，而第二列在上方有一个高图片少量的文字。有没有解决方法可以让MS浏览器中的rowspan工作？

<table> 
    <tr> 
     <td>George's first memory of note was ... </td> 
     <td rowspan="2"><img src="image/IM-GBA1885.jpg" height="440" width="280"></td> 
    </tr> 
    <tr> 
     <td rowspan="2"><img src="image/IM-JBA4-GBA.jpg" height="400" width="280"> </td> 
    </tr> 
    <tr> 
     <td>Also he recalled watching his half brother, James Benson Armstead IV <i>[on left]</i>, go through .... </td> 
    </tr> 
</table><br>

所以3行，每个图片单元上的rowspan = 2。这在Firefox和Chrome中都可以显示，但我尝试过的MS浏览器（IE11和Edge）都显示为一个简单的2行表格，在每个文本单元格上方和下方留下大量空间。

我知道MS应该禁止创建浏览器，直到他们知道'遵循标准'的含义是什么，但在这种情况发生之前，是否有一种解决方法可以在IE和Edge中正确显示这种显示？

来源

2017-01-23 LitterWalker

你可以发布你正在使用的HTML吗？ – Pavlo

我已将它添加到问题中。 – Pavlo

是的，有一个解决方法。停止使用表格进行页面布局:) –

<table style="table-layout:fixed"> 
<tr><td></td><td></td><td></td></tr> 
<tr><td colspan="3">three colunms width</td></tr> 
<tr><td colspan="2">two columns width</td><td>one column</td></tr> 
<tr><td colspan="1">one column</td><td colspan="1">one column</td><td colspan="1">one column</td></tr> 
</table>

说明该跨度属性值或每行中td元素的数量的总和的总和等于由所述第一确定td元素的数量（隐藏，由于TD细胞是空的）行。

转到validator.w3.org/nu并将您的标记复制并粘贴到直接输入表单中，然后按验证按钮.... w3验证程序可以检测td元素的数量和colspan的总数属性不匹配。

来源

2017-03-03 23:20:57

我的问题是用rowspan，而不是colspan，但我调整了你的解决方案。只有两列，我不能让图片重叠（即，第1列图片的顶部与第2列图片的底部在第2行）。但是，当我在所有三行中添加了空白的第三列时，我发现有轻微的重叠。因此，通过使最后一列中的第二项为一系列
项目，我可以控制第二行图片的重叠量。有点混乱，但它的作品。 – LitterWalker

有没有解决方法可以让MS浏览器中的rowspan工作？

回答

相关问题