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

72

我有这样的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"为内部表添加来阻止它，并且某种程度上可以正常工作。

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

— GaGar1n
source

它刚刚修复并破坏了我们的网站

— iamareebjamal

86

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

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

— 杰森
source

1

谢谢，这对我有所帮助，但是有没有比Wiki更能干的资源？我试图找到，但找不到，将不胜感激。

— GaGar1n

3

元素等的标准。抱歉，Wiki非常适合简要浏览。w3.org/2009/cheatsheet或完全是w3.org。

— 杰森

1

谢谢，不知道最大宽度仅用于块。我希望所有浏览器都呈现相同的页面！

— TheGateKeeper'5

9

摆弄表格元素display属性似乎是Stack Overflow的流行建议。如果这样做，别忘了它将不再是一张真正的桌子-希望看到各种副作用。

— 阿尔瓦罗·冈萨雷斯

6

@RobertSiemer-页眉和页脚未在正确的位置呈现，列未对齐...与表特定行为有关的所有内容。

— 阿尔瓦罗·冈萨雷斯

31

我知道这个问题已经解决了一段时间了，并且有一个可行的解决方法，但是答案max-width仅说明适用于块元素，并引用了不符合规范的来源，这是完全不正确的。

该规范（在CSS 3.0规范对CSS的内在外在和浆纱指的是CSS 2.1规范这个规则）中明确规定：

除不可替换的嵌入式元素，表行和行组以外的所有元素

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

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

— 达斯汀·威尔森
source

1

被引用的规范在大约10行之后也说

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.

了出来。

— 马特

@Matt是的，如果您注意到它在该清单中省略了表行和行组。这只是意味着规范不会尝试指定应用于表元素时的行为方式。它仍然适用。在Opera 15之前，Opera支持最小宽度等。

— –ustinwilson

25

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

table-layout: fixed

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

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

— 塞吉·萨根（Serj Sagan）
source

哇哦不知道Chrome忽略了这一点-这是我尝试的第一件事。我一直忙于解决这个莫莎**过去3小时..

— 阿尔特书房Braber

8

用div包装内部表，并将最大宽度设置为此包装的div。

— 扬·马赞尼克
source

1

如上所述，此变通办法有效，因为<p>标签和<div>标签自然以块样式显示。

— Michael Durrant 2012年

6

我遇到过同样的问题。我使用表格作为在页面上居中放置内容的一种方法，但是将safari忽略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">

— 悬崖
source

3

因为<p>标签和<div>标签自然以块样式显示，所以该解决方法有效。

— Michael Durrant 2012年

如果我不想为div设置最大宽度，而仅设置最小宽度，则表将变为屏幕的100％宽度，这太大了。关于如何解决这个问题的任何想法？

— 喵喵

在Mac Chrome中无效。

— 2540625年

1

我只是碰到了这个答案，值得注意的是，根据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”-当规范稳定并且在这方面明确时，我们还有一些事情值得期待。

— 苦瓜
source

0

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

我更换了

max-width: 360px

与

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

— 用户名
source

这无效（Mac Chrome）。

— 2540625年

0

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

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

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

因此，它只是未定义的，浏览器可以自由地执行其期望的操作，依靠它是不安全的。

— 希布57
source