{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?
I know this has been answered for a while and with a working workaround, but the answer stating that
max-widthonly applies to block elements and citing a source that's not the spec is completely incorrect.The spec (the CSS 3 spec for CSS Intrinsic & Extrinsic Sizing refers to the CSS 2.1 spec on this rule) clearly states:
which would mean it should apply to table elements.
It means that WebKit's behavior of not honoring
max-widthormin-widthon table elements is incorrect.Max-width applies to block elements.
<table>is neither block nor inline. Ambiguous enough? haha. You can usedisplay:block; max-width:1000pxand forget aboutwidth: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.
I just came across this answer and it is worth noting that according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width), their compatibility table for max-width says:
"[1] CSS 2.1 explicitly leaves the behavior of max-width with undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now."
There is some cool stuff on MDN though such as "fill-available" and "fit-content" - we have some things to look forward to when the spec stabilises and is explicit on this front...
I had the same issue. I used a table as a means to center my content on the page, but safari ignored
width:100%; max-width:1200pxas a style I applied to the table. I learned that if I wrap the table in a div and set left and right margins on auto on the div, it would center on the page and obey the max and min width attributes in safari and firefox on the mac. I have yet to check explorer or chrome on windows. Here is an example:Then I nested the table inside the div...
I was able to fix my problem with media query:
I replaced
with
I think what you're looking for here is:
Apply this style to the table and your table will respect the width you assign to it.
Note: Applying this style directly in
Chromewill look like it is not working. You need to apply the style in yourCSS / HTMLfile and refresh the page.