La proprietà cella di tabella ignora la larghezza

Question

Ho impostato una cella di tabella propery CSS per un div. Ho anche specificato la larghezza per il div e impostare l'overflow nascosto. Ma a causa della proprietà della cella di tabella il div non si cura della larghezza. Se metto una grande immagine, essa va fuori dalla larghezza. Come posso usare la cella della tabella e usare la larghezza fissa per il div?

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

Answer 1

Strano, this JSFiddle sembra funzionare per me.

In che browser stai riscontrando problemi?

Inoltre, per forzare una larghezza massima per le celle della tabella, utilizzare la proprietà max-width. È possibile see it here e il codice è di seguito.

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 seguirà le regole di dimensionamento della tabella - se il contenuto è troppo grande, si espanderà per renderlo in forma.

Avete davvero bisogno di usare display: table-cell? Per farlo funzionare, dovresti avvolgerlo in un altro div, dargli una larghezza di 400 e impostarlo su overflow: hidden ma sembra controproducente.