CODEWITHSUNDEEP
htmlcsshtml-table
vtortola
vtortola

Reputation: 35963

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 attributes 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.

Upvotes: 0

Views: 1465

Answers (2)

Zedrian
Zedrian

Reputation: 909

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;}

Upvotes: 1

Rob W
Rob W

Reputation: 349252

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.

Upvotes: 1

Related Questions