Làm cách nào để ngăn bảng đổi kích thước khi nội dung phát triển?

Question

Tôi có một số table, các ô được lấp đầy bằng hình ảnh. Tôi muốn những bức ảnh lớn hơn khi bạn di chuột qua chúng và tôi muốn các ô của bảng vẫn ở cùng kích thước.

Thay đổi kiểu img thành position:relative không hoạt động. Thay đổi nó thành position:absolute không hoạt động, nhưng tôi không biết vị trí tuyệt đối của hình ảnh.

Có giải pháp thanh lịch nào cho vấn đề này khi sử dụng CSS không? Tôi không muốn sử dụng bất kỳ JavaScript nào.

Answer 1

Sử dụng style="table-layout:fixed;", nhưng điều này sẽ làm cho văn bản hoặc hình ảnh trùng lặp với các cột khác trong trường hợp nó vượt quá chiều rộng. Đảm bảo không đặt các cụm từ văn bản dài mà không có khoảng trắng.

Answer 2

Thêm vertical-align:top vào các phần tử td.

Answer 3

Sử dụng table-layout: fixed cho bảng của bạn và một số chiều rộng cố định cho bảng và/hoặc ô của nó.

Answer 4

Bạn có thể thực hiện để có thể sử dụng vị trí, chỉ mục z, bên trái, trên cùng.

bạn nên nhìn vào cách này,

http://jsfiddle.net/wWTfs/

Answer 5

Sử dụng min-width trong các tế bào của bạn, hãy tìm một ví dụ ở đây

.cell1{ 
display:table-cell; 
width:100px; 
min-width:100px; 
border: 2px dashed #40f;  
} 

http://jsfiddle.net/Gueorguip13/avzuadhp/3/