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这样做？

解决方法

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