CSS tablosu ve Chrome'daki maksimum genişlik çalışmıyor

Question

Bu benim CSS kodum;

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

Ve HTML kodum; Ben Firefox penceresi ölçeklediğinizde

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

, masa İstiyorum gibi ... hatta 300px genişlik görüntü alanına kadar ince ölçekler. Ancak Chrome'da, tablo yalnızca görüntüleme alanı 50'den daha geniş olduğunda normal görünüyor. Chrome penceresini daraltsam, tablo sarının sağ tarafında kanar.

Chrome'un bunu yapmasının bir nedeni var mı?

Answer 1

max-width property

bir div oluşturma ve ona blok ve maksimum genişliği görüntülemek için bir stil vermek. Geleneksel <table>'u kullanabilir ve% 100 genişlikte bir stil verebilirsiniz. Bulduğum

Answer 2

Teknik olarak Chrome kurallara uymaktadır, çünkü max-width yalnızca blok elemanlarına uygulanmalıdır. MSDN Dokümanlar

:

min-width/max-width niteliklerini yüzen uygulanır ve kesinlikle konumlandırılmış blok ve inline-block elemanları yanı sıra bazı içsel kontrolleri. tablo satırları ve satır/sütun grupları gibi değiştirilmemiş satır içi öğeleri için geçerli değildir. (Bir "ikame" öğesi, örneğin, bir img veya metin olarak içsel boyutları vardır.)

tablo (veya durum gösterge olarak: bir tablo), teknik olarak çalışması gereken veya desteklenebilir. FF görünüşe göre iyi bir şekilde uyuyor, ancak muhtemelen ekranını kaldırarak başka bir çözüm bulmanız gerekecek: tablo veya max-width.

MSDN Doc

Answer 3

çözüm table-layout: fixed ve Just what I needed width: 100%