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"来阻止它，并以某种方式工作。
所以，我想知道的是 – 还有其他解决这个问题的方法，为什么会这样呢？
最大宽度适用于块元素 。 <table>既不是块也不是 inline 。 含糊不清？ 哈哈。 你可以使用display:block; max-width:1000px display:block; max-width:1000px并忘记width:100% 。 Chrome和Safari遵循规则！
编辑2017年5月：请注意，这个评论是7年前（2010年！）。 我怀疑浏览器多年来改变了一堆（我不知道，我不再做网页devise）。 我build议使用更新的解决scheme。
我知道这已经回答了一段时间，并有一个工作的解决方法，但答案指出， max-width只适用于块元素和引用一个来源是不是规范是完全不正确的。
规范 （CSS内部和外在尺寸的CSS 3规范是指CSS 2.1规范）明确规定：
所有元素，但未被replace的行内元素，表行和行组
这意味着它应该适用于表格元素。
这意味着WebKit不遵守表格元素的max-width或min-width的行为是不正确的。
我想你在这里寻找的是：
table-layout: fixed
将这种样式应用于表格，您的表格将遵守分配给它的宽度。
注意：直接在Chrome应用此样式看起来不起作用。 您需要在CSS / HTML文件中应用样式并刷新页面。
用div包裹内部表格，并将最大宽度设置为这个包装div。
我遇到过同样的问题。 我用一个表格作为手段来居中我的内容在页面上，但safari忽略width:100%; max-width:1200px width:100%; max-width:1200px作为我应用于表格的样式。 我了解到，如果我将表格封装在div中，并在div上设置了左右边距，则它将位于页面上，并遵循Safari中的最大和最小宽度属性以及Mac上的firefox。 我还没有检查浏览器或Windows上的铬。 这里是一个例子：
<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">
然后，我嵌套在表格里面的div …
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
我刚刚遇到了这个答案，值得注意的是，根据MDN（ https://developer.mozilla.org/en-US/docs/Web/CSS/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明确地将max-width的行为保留为undefined，因此任何行为都符合CSS2.1;较新的CSS规范可能会定义此行为，所以Web开发人员现在不应该依赖特定的行为。
MDN上有一些很酷的东西，例如“fill-available”和“fit-content” – 当规格趋于稳定时，我们有一些东西值得期待。
我能够解决我的问题媒体查询：
我replace了
max-width: 360px
同
@media (min-width: 440px) { width: 360px; }
这是一个明确的参考： 10可视化格式模型详细信息（w3.org）
在CSS 2.1中， 表格 ，内嵌表格，表格单元格，表格列和列组中的“最小宽度”和“最大宽度”的效果是未定义的 。
以前在这个线程中给出的参考，错误地将“table rows”读作“table”。 但是，这个真的说“桌子”。 这是CSS2的一部分，但CSS3是以CSS2为基础的max-width 。
所以这只是未定义的，浏览器可以自由地做他们想做的事情，依靠它是不安全的。
