tabla CSS y ancho máximo en Chrome no funciona

Question

Este es mi código 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; 
} 

Y mi código HTML;

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

Cuando escalar la ventana de Firefox, la tabla de escamas finas incluso hasta 300px ancho de ventana ... al igual que yo quiero. Pero en Chrome, la tabla parece normal solo cuando la ventana gráfica es más ancha que 50em. Si estrecho la ventana de Chrome, la tabla sangra en el lado derecho de la envoltura.

¿Hay alguna razón por la cual Chrome está haciendo esto?

Answer 1

Crear un div y darle un estilo para mostrar bloque y un ancho máximo. Puede usar el tradicional <table> y darle un estilo de 100% de ancho.

Answer 2

Técnicamente, Chrome sigue las reglas porque max-width solo debe aplicarse a los elementos de bloque.

De docs MSDN:

Los/atributos max-min Anchura de ancho se aplican a flotante y absolutamente posicionado de bloque y en línea de bloques de elementos, así como algunos intrínsecas controles. No se aplican a elementos en línea no reemplazados, como las filas de la tabla y los grupos de filas/columnas. (A elemento "sustituido" tiene intrínsecas dimensiones, tales como un img o textArea.)

La tabla (o en la pantalla de su caso: tabla) técnicamente no debería funcionar o ser apoyada. Parece que FF lo obedece bien, pero es probable que deba buscar otra solución, ya sea eliminando la pantalla : tabla o ancho máximo.

max-width property

MSDN Doc

Answer 3

La solución que encontré estaba usando table-layout: fixed y width: 100%