Chrome, Safari ignoring max-width in table
google-chrome, html, safari, scaling
Solution
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!
Edit May 2017: please note, this comment was made 7 years ago (in 2010!). I suspect browsers have changed a bunch over the years (I wouldn't know, I no longer do web design). I recommend using a more recent solution.
Problem
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"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 want to know is - are there any other ways of solving this problem and why is this happening?