У меня есть table, ячейки которого заполнены изображениями. Я бы хотел, чтобы изображения становились все больше, когда вы наводили на них курсор, и я хотел бы, чтобы ячейки таблицы оставались в одном размере.
Изменение стиля img на position:relative не работает. Изменение его на position:absolute действительно работает, но я не знаю абсолютной позиции изображений.
Есть ли элегантное решение этой проблемы с помощью CSS? Я бы предпочел не использовать JavaScript.
Используйте style="table-layout:fixed;", но это сделает текст или изображения совпадающими с другими столбцами, если он превышает ширину. Обязательно не размещайте длинные текстовые фразы без пробелов.
Используйте table-layout: fixed для вашей таблицы и некоторую фиксированную ширину для самой таблицы и/или ее ячеек.
Используйте min-width в своих ячейках, посмотрите пример здесь
.cell1{
display:table-cell;
width:100px;
min-width:100px;
border: 2px dashed #40f;
}
Вы можете сделать, чтобы вы могли использовать положение, z-index, left, top.
вы должны посмотреть на этот путь,
Добавьте vertical-align:top в элементы td.