Chrome、Safari 忽略表格中的最大宽度
我有这样的 HTML 代码：
<!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>
问题是 Chrome 和 Safari 忽略了 "max-width:1000px" 我的朋友发现我们可以通过为内表添加 "display:block" 来阻止它，而且它确实有效。
所以，我想知道的是 - 有没有其他方法可以解决这个问题以及为什么会发生这种情况？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
最大宽度适用于块元素。
既不是块也内联。够暧昧吗？哈哈。您可以使用display:block; max-width:1000px并忘记width:100%。 Chrome 和 Safari 遵守规则！2017 年 5 月编辑：请注意，此评论是 7 年前（2010 年！）发表的。我怀疑这些年来浏览器已经发生了很大的变化（我不知道，我不再做网页设计）。我建议使用更新的解决方案。
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.
我知道这个问题已经得到了一段时间的回答，并且有一个可行的解决方法，但是指出 max-width 仅适用于块元素并引用非规范来源的答案是完全不正确的。
规范（CSS 3 规范中的 CSS Intrinsic & Extrinsic Sizing 指的是 CSS 2.1 规范中关于此规则的规定）明确指出：
这意味着它应该适用于表元素。
这意味着 WebKit 不遵守表格元素的
max-width或min-width的行为是不正确的。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.我认为您在这里寻找的是：
将此样式应用于表格，您的表格将尊重您分配给它的宽度。
注意：直接在
Chrome中应用此样式看起来似乎不起作用。您需要在CSS / HTML文件中应用样式并刷新页面。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.用 div 包裹内部表格，并将 max-width 设置为该包裹 div。
Wrap inner table with div and set max-width to this wrapping div.
我有同样的问题。我使用表格作为将内容集中在页面上的方法，但 safari 忽略了
width:100%; max-width:1200px作为我应用于表格的样式。我了解到，如果我将表格包装在 div 中，并在 div 上将左右边距设置为 auto，它将在页面上居中，并遵守 mac 上 safari 和 firefox 中的最大和最小宽度属性。我还没有检查 Windows 上的资源管理器或 chrome。这是一个例子：然后我将表格嵌套在 div 中...
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...
我刚刚遇到这个答案，值得注意的是，根据 MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width），他们的 max-width 兼容性表说：
“[1] CSS 2.1 明确保留了max-width 未定义。因此，任何行为都符合 CSS2.1；较新的 CSS 规范可能会定义此行为，因此 Web 开发人员现在不应依赖特定的行为。”
MDN 上有一些很酷的东西，例如“fill-available”和“fit-content” - 当规范稳定并在这方面明确时，我们有一些值得期待的东西......
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...
这是一个明确的参考：10 视觉格式化模型详细信息 (w3.组织）
本线程之前给出的参考文献将“表行”错误地读作“表”。然而，这个确实说的是“桌子”。这是 CSS2 的一部分，但 CSS3 参考 CSS2 作为
max-width的基础。所以它只是未定义的，浏览器可以自由地做他们想做的事情，依赖它是不安全的。
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.
我能够通过媒体查询解决我的问题：
我替换
为
I was able to fix my problem with media query:
I replaced
with