CSS table and max-width in Chrome not working

问题

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;
}

And my HTML code;

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

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.

Is there a reason why is Chrome doing this?

回答1:

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.

回答2:

Technically Chrome is following the rules because max-width should only apply to block elements.

From MSDN docs:

The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)

The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.

max-width property

MSDN Doc

回答3:

The solution I found was using table-layout: fixed and width: 100%

回答4:

I was able to use a mixin(SASS) to fix the issue.

 @mixin clearfix {
   &::after{
    content: "";
    display: table;
    clear: both;
   }
 }

来源：https://stackoverflow.com/questions/12232858/css-table-and-max-width-in-chrome-not-working