Thuộc tính ô bảng bỏ qua chiều rộng

Question

Tôi đã đặt ô bảng thích hợp CSS cho một div. Tôi cũng đã chỉ định chiều rộng cho div và đặt overflow hidden. Nhưng vì thuộc tính của ô bảng, div không quan tâm đến chiều rộng. Nếu tôi đặt bất kỳ hình ảnh lớn, nó đi ra khỏi chiều rộng. Làm thế nào tôi có thể sử dụng ô bảng và sử dụng chiều rộng cố định cho div?

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

Answer 1

Lạ, this JSFiddle có vẻ phù hợp với tôi.

Trình duyệt nào bạn gặp sự cố?

Ngoài ra, để buộc chiều rộng tối đa cho các ô bảng của bạn, hãy sử dụng thuộc tính max-width. Bạn có thể see it here và mã bên dưới.

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

sẽ tuân thủ quy tắc định kích thước bảng - nếu nội dung quá lớn, nó sẽ mở rộng để phù hợp.

Bạn có thực sự cần sử dụng display: table-cell không? Để làm cho nó hoạt động, bạn phải quấn nó trong div khác, cho nó chiều rộng 400 và đặt nó là overflow: hidden nhưng điều đó có vẻ ngược lại.