Question

I have a little complicated HTML+CSS situation that I would like to understand and fix somehow.

The HTML is generated by a GWT application, so please don’t comment on the huge abount of overhead.

My problem is that the inner table with the blue border is not taking the full horizontal space in the red bordered div.

I tried to put width:100% on every level between the div and the actual table but did not help. In runtime the outer div’s width is not known, so I would not like to repeat the exact widthin the nested table.

Here is the jsFiddle that shows the situation: http://jsfiddle.net/jantekb/NBCcZ/

In your answer please try to explain the reason for the actual result as well, not only telling me the right answer, however the latter alone is also highly appreciated.. 🙂

Answer 1

Try this in your css:

table {
    width: 100%;       
}

This will set all your table elements to be 100% width of their parent elements. Being restricted by the div with the fixed width of 550px. All the child elements will conform to the tables width and adjust properly. The tables width by default will only be as wide as the elements it contains.