HTML table that uses rowspan and colspan gets overlapped by the next element

I am designing a very simple table that contains a data element's properties. This element will be used to represent each element of a AJAX response in a kind of list.

The table is using "rowspan" and "colspan" to enlarge some cells. The problem, is that when I add an element below, this element overlaps the table, I don't know why. The HTML is valid, and the rowspan att开发者_如何学Cributes indicate the exact amount of rows to merge.

I have deployed an example here: http://jsfiddle.net/vtortola/KzjKg/9/

As you can see, the green block overlaps the table, and that is the thing I want to avoid.

Any idea why is this happening?

Cheers.

You've attributed max-height:50px; to the div which contains the table. Remove this CSS declaration, and the table won't be overlapped any more.

I think the problem:

1) You maybe remove the max-height where your table is more than 50px.

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