Html Chrome，Safari 忽略表格中的最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4019604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome, Safari ignoring max-width in table
提问by GaGar1n
I've got HTML code like this:
我有这样的 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>
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.
问题是 Chrome 和 Safari 忽略了"max-width:1000px"我的朋友发现我们可以通过"display:block"为内表添加来阻止它，并且它以某种方式工作。
So, what I want to know is - are there any other ways of solving this problem and why is this happening?
所以，我想知道的是 - 有没有其他方法可以解决这个问题，为什么会发生这种情况？
回答by Jason
Max-width applies to block elements. <table>is neither block norinline. Ambiguous enough? haha. You can use display:block; max-width:1000pxand forget about width:100%. Chrome and Safari follow the rules!
Max-width 适用于块元素。<table>既不是block也不是inline。够暧昧吗？哈哈。您可以使用display:block; max-width:1000px并忘记width:100%. Chrome 和 Safari 遵守规则！
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.
2017 年 5 月编辑：请注意，此评论是 7 年前（2010 年！）。我怀疑这些年来浏览器发生了很大变化（我不知道，我不再做网页设计）。我建议使用更新的解决方案。
回答by dustinwilson
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.
我知道这已经有一段时间了，并且有一个可行的解决方法，但是说明max-width仅适用于块元素并引用不是规范的来源的答案是完全不正确的。
The spec(the CSS 3 specfor CSS Intrinsic & Extrinsic Sizing refers to the CSS 2.1 spec on this rule) clearly states:
该规范（CSS Intrinsic & Extrinsic Sizing的CSS 3 规范是指关于此规则的 CSS 2.1 规范）明确指出：
all elements but non-replaced inline elements, table rows, and row groups
所有元素，但未替换的内联元素、表格行和行组
which would mean it should apply to table elements.
这意味着它应该适用于表格元素。
It means that WebKit's behavior of not honoring max-widthor min-widthon table elements is incorrect.
这意味着 WebKit 不尊重max-width或min-width对表格元素的行为是不正确的。
回答by Serj Sagan
I think what you're looking for here is:
我认为你在这里寻找的是：
table-layout: fixed
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 your CSS / HTMLfile and refresh the page.
注意：直接应用此样式Chrome看起来不起作用。您需要在CSS / HTML文件中应用样式并刷新页面。
回答by Jan Mazánek
Wrap inner table with div and set max-width to this wrapping div.
用 div 包裹内表并将 max-width 设置为这个包裹 div。
回答by Cliff
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:
我遇到过同样的问题。我使用表格作为将我的内容集中在页面上的width:100%; max-width:1200px一种方式，但 safari 忽略了我应用于表格的样式。我了解到，如果我将表格包装在 div 中并在 div 上的 auto 上设置左右边距，它将以页面为中心并遵守 mac 上 safari 和 firefox 中的最大和最小宽度属性。我还没有在 Windows 上检查资源管理器或 chrome。下面是一个例子：
<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">
Then I nested the table inside the div...
然后我将表格嵌套在 div 中...
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
回答by jcuenod
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:
我刚刚看到这个答案，值得注意的是，根据 MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)，他们的 max-width 兼容性表说：
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes) | Not supported | (Yes) | Not supported |
"[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."
“[1] CSS 2.1 明确地将 max-width 的行为保留为未定义。因此，任何行为都符合 CSS2.1；更新的 CSS 规范可能会定义这种行为，因此 Web 开发人员现在不应依赖特定的行为。”
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...
MDN 上有一些很酷的东西？不过，例如“fill-available”和“fit-content”——当规范稳定并在这方面明确时，我们有一些值得期待的事情......
回答by Hibou57
Here is an unambiguous reference: 10 Visual formatting model details?(w3.org)
这是一个明确的参考：10 视觉格式化模型细节？（w3.org）
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
在 CSS 2.1 中，'min-width' 和 'max-width'对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。
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.
之前在该线程中给出的引用错误地将“表行”读作“表”。然而，这个确实是“桌子”。那是 CSS2 的一部分，但 CSS3 指的是 CSS2 作为max-width.
So it's just undefined and browser are free to do what they wish and it's unsafe to rely on it.
所以它只是未定义，浏览器可以自由地做他们想做的事，依赖它是不安全的。
回答by user2908392
I was able to fix my problem with media query:
我能够解决媒体查询的问题：
I replaced
我换了
max-width: 360px
with
和
@media (min-width: 440px) {
width: 360px;
}
