内容增长时如何阻止表调整大小?

时间:2012-03-01 20:55:05

标签: html css html-table

我有一个table,其中的单元格中充满了图片。当你将鼠标悬停在它们上面时,我希望这些图片变得更大,我希望桌子的细胞保持相同的大小。

img样式更改为position:relative不起作用。将其更改为position:absolute确实有效,但我不知道图像的绝对位置。

使用CSS有没有优雅的解决方案?我宁愿不使用任何JavaScript。

6 个答案:

答案 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;    
}

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

答案 3 :(得分:1)

vertical-align:top添加到td元素。

答案 4 :(得分:1)

你可以使用position,z-index,left,top。

你应该这样看,

http://jsfiddle.net/wWTfs/

答案 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>

w3Schools zoom hover