views:

49

answers:

1

I've got HTML code like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
    <html xmlns="http://www.w3.org/1999/xhtml"&gt; 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html> 

The problem is that Chrome and Safari are ignoring "max-width:1000px" My friend has found that we can prevent it by adding "display:block" for the inner table, and it's somehow working.

So, what I wanna know is - are there any other ways of solving this problem and why is this happening?

+2  A: 

Max-width applies to block elements. <table> is neither block nor inline. Ambiguous enough? haha. You can use display:block; max-width:1000px and forget about width:100%. Chrome and Safari follow the rules!

Jason
Thanks, that helped me, but is there any source that is more competent than Wiki? I tried to find, but couldn't, would appreciate a lot.
GaGar1n
The standards of the elements and such. Sorry, Wiki is good for a brief look. http://www.w3.org/2009/cheatsheet or just w3.org altogether.
Jason