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

最大宽度适用于block elements。 <table>不是block nor inline。暧昧不够？哈哈。您可以使用display:block; max-width:1000px而忘记width:100%。 Chrome和Safari遵守规则！

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

Answer 2

我知道这已经回答了一段时间并且有了解决方法，但是答案说明max-width仅适用于块元素并引用不是规范的源是完全错误的。

spec（CSS内在和外部大小的CSS 3 spec指的是此规则的CSS 2.1规范）明确指出：

所有元素，但未替换的内联元素，表行和行组

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

这意味着WebKit在表元素上不尊重max-width或min-width的行为是不正确的。

Answer 3

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

table-layout: fixed

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

注意：直接在Chrome中应用此样式看起来不起作用。您需要在CSS / HTML文件中应用该样式并刷新页面。

Answer 4

用div包裹内表并将max-width设置为此包装div。

Answer 5

我有同样的问题。我使用表格作为将内容集中在页面上的方法，但是safari忽略了width:100%; max-width:1200px作为我应用于表格的样式。我了解到，如果我将表格包装在div中并在div上设置自动左边距和右边距，它将居中在页面上并遵循safari中的max和min width属性以及mac上的firefox。我还没有检查窗口上的资源管理器或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），他们的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上有一些很酷的东西，比如“填充可用”和“适合内容” - 当规范稳定并且在这方面明确时，我们有一些值得期待的东西......

Answer 7

我能够通过媒体查询修复我的问题：

我替换了

max-width: 360px

与

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

Answer 8

这是一个明确的参考：10 Visual formatting model details (w3.org)

在CSS 2.1中，＆＃39; min-width＆＃39;和＆＃39; max-width＆＃39; 表，内联表格，表格单元格，表格列和列组未定义。

此线程中先前给出的引用，错误地将“table rows”读作“table”。然而，这个，真的说“桌子”。这是CSS2的一部分，但CSS3指的是基于max-width的CSS2。

所以它只是未定义，浏览器可以自由地做他们想做的事情，并且依赖它是不安全的。

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

8 个答案: