Chrome中的CSS表格和最大宽度不起作用

这是我的CSS代码;Chrome中的CSS表格和最大宽度不起作用

#wrap { 
    width:50em; 
    max-width: 94%; 
    margin: 0 auto; 
    background-color:#fff; 
} 

#head { 
    width:50em; 
    height:10em; 
    max-width: 100%; 
    margin: 0 auto; 
    text-align:center; 
    position: relative; 
} 

#css-table { 
    display: table; 
    margin: 1em auto; 
    position: relative; 
    width:50em; 
    max-width: 100%;    
} 

#css-table .col { 
    display: table-cell; 
    width: 20em; 
    padding: 0px; 
    margin: 0 auto; 
} 

#css-table .col:nth-child(even) { 
    background: #fff; 
} 

#css-table .col:nth-child(odd) { 
    background: #fff; 
    border-right: 4px double #b5b5b5; 
}

而我的HTML代码;

<div id="cont"> 
    <div id="css-table"> 
     <div class="col">123</div> 
     <div class="col">123</div> 
    </div> 
</div>

当我缩放Firefox窗口时，表格甚至可以缩放至300px宽度的视口...就像我想要的那样。但在Chrome中，只有当视口大于50em时，表才会正常显示。如果我缩小Chrome窗口，则表格会在包装的右侧渗出。

Chrome有没有这样做的原因？

来源

2012-09-02 TM23

创建一个div，并给它一个造型，以显示块和最大宽度。你可以使用传统的<table>，并给它一个100％宽度的样式。

来源

2012-09-02 04:58:14

从技术上讲，Chrome遵循规则，因为最大宽度只应用于块元素。

从MSDN文档：

的最小宽度/最大宽度属性适用于浮动和绝对定位块和内联块的元件，以及一些固有控件。它们不适用于非替换内联元素，例如表格行和行/列组。（A“替换为”元件具有固有尺寸，例如一个img或TEXTAREA。）

表（或在您的情况下的显示：表）应该在技术上无法工作或支撑。 FF显然服从它，但您可能需要提出另一种解决方案，或者删除显示屏：表或最大宽度。

max-width property

MSDN Doc

来源

2012-09-02 02:48:36 DigTheDoug

正是我需要的，谢谢！显示表在Chrome中工作完美:) – TM23

我找到了解决办法是使用table-layout: fixed和width: 100%

来源

2017-01-16 12:16:04 Iftah

这是我最近做的，但通过这样做，我需要再次设置宽度。只有让旧的CSS工作，没有固定的最小和最大宽度？ – Adrian

Chrome中的CSS表格和最大宽度不起作用

回答

相关问题