Table CSS et largeur maximale dans Chrome ne fonctionne pas

C'est mon code 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;
}

Et mon code HTML;

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

Quand je l'échelle de la fenêtre de Firefox, la table des échelles fines, même en bas de 300px de largeur de fenêtre...tout comme je veux. Mais dans Chrome, le tableau semble normal que lorsque la fenêtre est plus large que 50em. Si je étroit que le Chrome de la fenêtre, la table des saignements sur le côté droit de l'enveloppe.

Est-il une raison pourquoi est-Chrome de faire ceci?

source d'informationauteur TM23

  1. 5

    Créer un div et de lui donner un style pour l'affichage de bloc et d'une largeur max. Vous pouvez utiliser les <table> et lui donner un style de 100% de largeur.

  2. 15

    Techniquement Chrome est en suivant les règles parce que max-width ne s'appliquent qu'aux éléments de bloc.

    À partir de MSDN docs:

    Le min-width/max-width attributs s'appliquent à flotter et absolument
    positionné bloc et inline-block éléments, ainsi que certains intrinsèque
    les contrôles. Ils ne s'appliquent pas aux non-remplacement des éléments en ligne, tels que
    les lignes de la table et de la ligne/colonne groupes. (A "remplacé" élément intrinsèque
    dimensions, comme une img ou textArea.)

    La table (ou dans votre cas, display:table) est techniquement pas travailler ou être pris en charge. FF apparemment, il obéit très bien, mais vous aurez probablement besoin de trouver une autre solution, soit en retirant le display:table ou la max-width.

    max-width de la propriété

    Doc MSDN

  3. 4

    La solution que j'ai trouvé était à l'aide de table-layout: fixed et width: 100%

  4. 0

    J'ai été en mesure d'utiliser un mixin(SASS) pour résoudre le problème.

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