Tablo hücresi özelliği, genişliği yoksayar

Question

Bir div için bir CSS ilerleme tablosu hücresi belirledim. Ayrıca div için genişlik belirledim ve taşma taşması ayarlandı. Ancak tablo hücresi özelliği nedeniyle div genişliği hakkında umurumda değil. Büyük bir resim yerleştirirsem, genişlikten çıkar. Tablo hücresini ve div için sabit genişliğini nasıl kullanabilirim?

.right{ 
    display: table-cell; 
    overflow: hidden !important; 
    vertical-align: top; 
    width: 400px; 
} 

Answer 1

Garip, this JSFiddle benim için çalışıyor gibi görünüyor.

Hangi tarayıcıda sorun yaşıyorsunuz? Tablo hücreleriniz için maksimum genişliği zorlamak için max-width özelliğini kullanın. see it here yapabilir ve kod aşağıdadır.

HTML:

<div class='table'> 
    <div class='tr'> 
    <div class='right'>hey</div> 
    </div> 
</div>​ 

CSS:

.table { 
    display: table; 
} 
.tr { 
    display: table-row; 
} 
.right{ 
    display: table-cell; 
    overflow: hidden !important; 
    vertical-align: top; 
    max-width: 400px; 
    outline: 1px solid #888; 
}​ 

Answer 2

display: table-cell tablo boyutlandırma kuralları takip edecek - içerik çok büyükse, o uydurabilmek için genişleyecektir.

Gerçekten display: table-cell'u kullanmanız gerekiyor mu? Çalışmasını sağlamak için, başka bir div içine sarmanız, 400 genişliğini vermeniz ve overflow: hidden'a ayarlamanız gerekir, ancak bu karşı-üretken gibi görünür.