我有一个table
,其中的单元格中充满了图片。当你将鼠标悬停在它们上面时,我希望这些图片变得更大,我希望桌子的细胞保持相同的大小。
将img
样式更改为position:relative
不起作用。将其更改为position:absolute
确实有效,但我不知道图像的绝对位置。
使用CSS有没有优雅的解决方案?我宁愿不使用任何JavaScript。
答案 0 :(得分:61)
使用style="table-layout:fixed;"
,但这会使文字或图片与其他列重叠,以防超出宽度。确保不要放置没有空格的长文本短语。
答案 1 :(得分:10)
对您的表使用table-layout: fixed
,为表本身和/或其单元使用一些固定宽度。
答案 2 :(得分:8)
在您的单元格中使用min-width,在此处查看示例
.cell1{
display:table-cell;
width:100px;
min-width:100px;
border: 2px dashed #40f;
}
答案 3 :(得分:1)
将vertical-align:top
添加到td元素。
答案 4 :(得分:1)
答案 5 :(得分:0)
使用CSS过渡。
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<style>
</style>
<p>Hover over the div element.</p>
<table>
<tbody>
<tr>
<td>
<div class="zoom"></div>
</td>
<td> test text</td>
</tr>
</tbody>
</table>