2 replies [Last post]
jreeman
Offline
newbie
Last seen: 9 years 36 weeks ago
Timezone: GMT+1
Joined: 2009-11-08
Posts: 2
Points: 3

Hello,

here is an example of a container (a div) containing a table.

<html> 
<head><title>Tab-div</title></head> 
    <body> 
        <div style="border:1px solid red;padding:10px;"> 
            <table style="border:3px solid blue;"> 
                <tr> 
                    <td style="border:1px solid green;padding:2px;">111111111111111111111111</td> 
                    <td style="border:1px solid green;padding:2px;">222222222222222222222222</td> 
                    <td style="border:1px solid green;padding:2px;">333333333333333333333333</td> 
                    <td style="border:1px solid green;padding:2px;">444444444444444444444444</td> 
                </tr> 
            </table> 
        </div> 
    </body> 
<html>

In that case, the div doesn't care about its content and if the window of the browser in smaller than the table content, the div cuts the table on the right side.

I put in attachement the screenshot that show the div cutting the table on the right.

I found a solution that solves the problem : if I set the css property display of the div to "display:table" or "display:inline-block" the div doesn't cut the table anymore, but I find that is more an hack than a clean solution (the good solution should be "display:table-block" but it doesn't exist).

What are you thinking about this problem ?

PS : all of this involve firefox, I didn't yet test the behavior on ie6.

AttachmentSize
8671-tab-div.png3.13 KB
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 20 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

This is correct default

This is correct default behavior. The div takes up all available width (default display: block; width: auto) and the contents, which are wider, simply overflow the div. So you need to change the way the div normally contains it's children. As you've discovered, display: table; will do this as will floating the div.

jreeman
Offline
newbie
Last seen: 9 years 36 weeks ago
Timezone: GMT+1
Joined: 2009-11-08
Posts: 2
Points: 3

Thx

I agree with your answer.

Thank you.