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> Code (markup): 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.
Please try to use display:table-cell so, the coding will be like below: <html> <head><title>Tab-div</title></head> <body> <div style="border:1px solid red;padding:10px; display: table-cell"> <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> Code (markup):
you can use this <div style="width:500px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> HTML:
The last solution wasn't good because I don't want to set the table and div width, I'll try with table-cell.
That and divs can't have tr's just randomly floating around inside them. If there are tr's and td's then there must be a <table> Display: table-cell may not work cross-browser as a few of them only want to do table-cell on elements who are inside someone who is set to display: table-row who is inside someone set to display: table (Safari at least used to be like this and FF didn't like display: table skipping to display: table-cell either). Obviously I don't know enough about your situation because the easiest solution is to set a width (or min-width even) of the div to the smallest the table can ever become. We're assuming your table has a minimum width due to its contents and that it can grow wider if the browser allows it. Setting a min-width will force the browser to set scrollbars when the browser window gets too small to show all the content. Currently your div is shrinking with the browser window like any static block would do, while the table, being unable to shrink any further, overflows out (like it should). That or, remove the div entirely. What's it doing anyway? If the div can die a silent death, no reason the table itself can't have a width or min-width. IE6 nor 7 will not deal with display: table or related table-* properties at all... IE8 will. IE6 will not deal with min-width, but it does have an expanding-box bug where content can force a greater width of a container instead of overflowing like it should.
the div contains different elements and all the elements must be in this box that has a border (surrounding box). I don't understand when you say I have to set the width of the div to the smallest the table can ever become. It works when the table width will be the smallest, but for higher size the div will not grow with the table. i confirm I have to find a solution only for firefox because fir IE, it seems there is a bug, as you said, that finally give what I want. There is another solution that is to set float:left for the div. I never knew it but when a div is float:left|right its size is the sum of the size of all the elements it contains.
Floating the div will make it -contain all/any floated children -shrink-wrap to the width of its contents The shrinkage isn't assured in IE6 (depends on what the children are doing), but it will work in all the other browsers.