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

Question

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

GaG*_*r1n 72 html safari scaling google-chrome

我有这样的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>

Run Code Online (Sandbox Code Playgroud)

问题是Chrome和Safari无视"max-width:1000px" 我的朋友发现我们可以通过添加"display:block"内部表来阻止它,并且它在某种程度上起作用.

所以,我想知道的是 - 有没有其他方法来解决这个问题,为什么会发生这种情况？

Answer 1

Jas*_*son 86

最大宽度适用于块元素.<table>既不是块也不是内联.暧昧不够？哈哈.你可以使用display:block; max-width:1000px和忘记width:100%.Chrome和Safari遵守规则!

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

摆弄表格元素`display`属性似乎是Stack Overflow的流行建议.如果你这样做,不要忘记它将不再是一个真正的表 - 期望看到各种副作用. (8认同)
@RobertSiemer - 页眉和页脚没有呈现在正确的位置,列不对齐......所有与表特定行为相关的内容. (6认同)
元素的标准等.对不起,Wiki很适合简要介绍一下.http://www.w3.org/2009/cheatsheet或者只是w3.org. (3认同)

Answer 2

小智 31

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

该规范(在CSS 3.0规范对CSS的内在外在和浆纱指的是CSS 2.1规范这个规则)中明确规定:

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

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

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

引用的规范还在大约 10 行之后说：“在 CSS 2.1 中，‘最小宽度’和‘最大宽度’对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。”无论如何，对我来说是相当模糊的。 (2认同)

Answer 3

Ser*_*gan 25

我想你在这里寻找的是:

table-layout: fixed

Run Code Online (Sandbox Code Playgroud)

将此样式应用于表格,您的表格将遵循您为其指定的宽度.

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

Answer 4

小智 8

用div包装内部表并将max-width设置为此包装div.

Answer 5

小智 6

我遇到过同样的问题.我使用表格作为将内容集中在页面上的方法,但是width:100%; max-width:1200px我将Safari 作为我应用于表格的样式而被忽略.我了解到,如果我将表格包装在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">

Run Code Online (Sandbox Code Playgroud)

然后我在div里面嵌套了表...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

Run Code Online (Sandbox Code Playgroud)

这种解决方法有效,因为`<p>`标签和`<div>`标签自然地显示为块式. (3认同)

归档时间：	14 年，10 月前
查看次数：	61236 次
最近记录：	8 年前