使用rowspan和colspan的HTML表被下一个元素重叠

我正在设计一个非常简单的表，其中包含数据元素的属性。这个元素将用来表示一种列表中的AJAX响应的每个元素。使用rowspan和colspan的HTML表被下一个元素重叠

该表使用“rowspan”和“colspan”来放大某些单元格。问题是，当我在下面添加一个元素时，这个元素与表格重叠，我不知道为什么。 HTML是有效的，并且rowspan属性指示要合并的确切数量的行。

我已经在这里部署了一个例子：http://jsfiddle.net/vtortola/KzjKg/9/

正如你可以看到，绿色块重叠的表，那是我想避免的事情。

任何想法为什么会发生这种情况？

干杯。

2011-09-23 vtortola

您已将max-height:50px;归于包含该表格的div。删除这个CSS声明，并且表不会再被重叠。

2011-09-23 11:05:22

该死的......有没有办法强制桌子的最大高度？谢谢。 – vtortola

您可以将“overflow：auto”添加到容器div，以便表格不会“超出框”。这在必要时将滚动条添加到div。 –

@vtortola 滚动条只有在必要时才会出现，以符合定义的“最大高度”。我提出了两种解决方案：从div中删除'max-height'（以便表获得所需的空间），或者将“overflow：auto”添加到div中，以便div在必要时获取滚动条。 –

我认为这个问题：

1）你也许去除最大高度在您的表是超过50像素。

div.mobileRow{ 
width:100%; 
font-family:Arial; 
margin:5px;}

2011-09-23 11:10:43

'display：block;'是div元素的默认值。 –

不能在上面添加注释，但溢出：auto会剪切表格。和滚动条可能不会出现:( –

回答