Chrome中的CSS表格和最大宽度不起作用 [英] CSS table and max-width in Chrome not working

问题描述

这是我的CSS代码;

This is my CSS code;

#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浏览器窗口，表格就会在换行的右边流血。

When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.

Chrome是否有这个功能？

Is there a reason why is Chrome doing this?

推荐答案

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

Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.

这篇关于Chrome中的CSS表格和最大宽度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！