Как остановить таблицу при изменении размера содержимого?

У меня есть table, ячейки которого заполнены изображениями. Я бы хотел, чтобы изображения становились все больше, когда вы наводили на них курсор, и я хотел бы, чтобы ячейки таблицы оставались в одном размере.

Изменение стиля img на position:relative не работает. Изменение его на position:absolute действительно работает, но я не знаю абсолютной позиции изображений.

Есть ли элегантное решение этой проблемы с помощью CSS? Я бы предпочел не использовать JavaScript.

Ответ 1

Используйте style="table-layout:fixed;", но это сделает текст или изображения совпадающими с другими столбцами, если он превышает ширину. Обязательно не размещайте длинные текстовые фразы без пробелов.

Ответ 2

Используйте table-layout: fixed для вашей таблицы и некоторую фиксированную ширину для самой таблицы и/или ее ячеек.

Ответ 3

Используйте min-width в своих ячейках, посмотрите пример здесь

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

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

Ответ 4

Вы можете сделать, чтобы вы могли использовать положение, z-index, left, top.

вы должны посмотреть на этот путь,

http://jsfiddle.net/wWTfs/

Ответ 5

Добавьте vertical-align:top в элементы td.