Właściwość komórki tabeli ignoruje szerokość

Question

Ustawiłem tabelę celową CSS dla elementu div. Podano również szerokość ukrytego elementu div i ustawionego przepełnienia. Ale z powodu właściwości komórki tabeli, div nie dba o szerokość. Jeśli umieściłbym jakiś duży obraz, to wychodzi poza szerokość. Jak mogę użyć komórki tabeli i użyć stałej szerokości dla elementu div?

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

Answer 1

Dziwne, this JSFiddle wydaje się działać dla mnie.

W jakiej przeglądarce występują problemy?

Aby wymusić maksymalną szerokość komórek tabeli, należy również użyć właściwości max-width. Możesz see it here, a kod jest poniżej.

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 będą przestrzegać zasad wymiarowania stole - jeśli zawartość jest zbyt duży, to będzie poszerzyć tak, by pasował.

Czy naprawdę potrzebujesz użyć display: table-cell? Aby to zadziałało, musisz zawinąć go w inny div, nadać mu szerokość 400 i ustawić na overflow: hidden, ale wydaje się to być nieproduktywne.