Chrome，Safari忽略表格的最大宽度

Question

我有这样的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"来防止出现这种情况，并且可以正常工作。

因此，我想知道的是-还有其他方法可以解决此问题，为什么会这样？

Answer 1

最大宽度适用于块元素 。 <table>既不是block 也不是 inline 。 够big昧？ 哈哈。 您可以使用display:block; max-width:1000px display:block; max-width:1000px并display:block; max-width:1000px width:100% 。 Chrome和Safari遵守规则！

编辑2017年5月：请注意，此评论是7年前（2010年！）。 我怀疑这些年来浏览器发生了很多变化（我不知道，我不再做网页设计了）。 我建议使用更新的解决方案。

Answer 2

我知道这个问题已经解决了一段时间，并且有一个可行的解决方法，但是答案指出max-width仅适用于块元素，并且引用了非规范的来源是完全错误的。

规范 （用于CSS内部和外部大小调整的CSS 3规范是指此规则的CSS 2.1规范）明确指出：

除不可替换的内联元素，表行和行组以外的所有元素

这意味着它应该适用于表格元素。

这意味着WebKit不遵守表元素的max-width或min-width的行为是错误的。

Answer 3

我认为您在这里寻找的是：

table-layout: fixed

将此样式应用于表格，表格将尊重您为其分配的宽度。

注意：直接在Chrome应用此样式似乎无效。 您需要在CSS / HTML文件中应用样式，然后刷新页面。

Answer 4

用div包裹内部表，并为此包裹div设置max-width。

Answer 5

我遇到过同样的问题。 我使用表格作为在页面上居中放置内容的方法，但野生动物园却忽略width:100%; max-width:1200px width:100%; max-width:1200px作为我应用于表格的样式。 我了解到，如果我将表格包装在div中，并在div上的auto上设置左右边距，它将在页面上居中，并在mac上使用safari和firefox中的max和min width属性。 我尚未检查Windows上的资源管理器或Chrome。 这是一个例子：

<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">

Answer 6

我刚刚遇到了这个答案，值得注意的是，根据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的行为保留为未定义。因此，任何行为都符合CSS2.1；更新的CSS规范可以定义此行为，因此Web开发人员现在不应该依赖特定的行为。”

MDN上有一些很酷的东西，例如“ fill-available”和“ fit-content”-当规范稳定并且在这方面明确时，我们还有一些事情值得期待。

Answer 7

我能够解决媒体查询的问题：

我更换了

max-width: 360px

与

@media (min-width: 440px) {
    width: 360px;
}

Answer 8

这是明确的参考： 10视觉格式化模型详细信息（w3.org）

在CSS 2.1中，'min-width'和'max-width' 对表 ，内联表，表单元格，表列和列组的影响是不确定的 。

在该线程中先前给出的引用将“表行”错误地读取为“表”。 但是，这个实际上说的是“桌子”。 那是CSS2的一部分，但是CSS3指的是CSS2，是基于max-width 。

因此，它只是未定义的，浏览器可以自由地执行他们想要的操作，并且依靠它是不安全的。