CODEWITHSUNDEEP
htmlcss
jabal
jabal

Reputation: 12367

Inner HTML table is not full width

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.. :-)

Upvotes: 0

Views: 863

Answers (3)

Sean Keating
Sean Keating

Reputation: 1728

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.

Upvotes: 1

Sharlike
Sharlike

Reputation: 1789

You have to specify 100% width for each table element.

adding the following css fixed it for me:

table{
    width: 100%;
}

http://jsfiddle.net/NBCcZ/3/

Upvotes: 1

vtortola
vtortola

Reputation: 35963

One of the tables has no 100% in width, add this line and you will see the difference:

td > table { width:100%; }

http://jsfiddle.net/NBCcZ/2/

But you should find a better way of adding that CSS in that mess :D

Cheers.

Upvotes: 1

Related Questions