{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Explosion°爆炸 的问题《Chrome, Safari ignoring max-width in table》','https://www.manongdao.com/q-1176161.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
Here is an unambiguous reference: 10 Visual formatting model details (w3.org)
References given previously in this thread, erroneously read “table rows” as “table”. This one however, really says “table”. That's part of CSS2, but CSS3 refers to CSS2 for the basis of
max-width.So it's just undefined and browser are free to do what they wish and it's unsafe to rely on it.
Wrap inner table with div and set max-width to this wrapping div.