How to stop table from resizing when contents grow?

Question

I have a table, the cells of which are filled with pictures. I would like the pictures to grow larger when you hover over them and I would like the cells of the

Answer 1

use CSS transitions.

.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

Answer 2

Use table-layout: fixed for your table and some fixed width for table itself and/or its cells.

Answer 3

Add vertical-align:top to the td elements.

Answer 4

Use min-width in your cells, look an example here

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

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

Answer 5

You can do to you can use position,z-index,left,top.

you should look at this way,

http://jsfiddle.net/wWTfs/

Answer 6

Use style="table-layout:fixed;", but this will make text or images overlap with other columns in case it exceed the width. Make sure not to place long text phrases without spaces.