GaletteRaclette GaletteRaclette - 23 days ago 6
CSS Question

Image split into table: Remove space between rows

Maybe the solution is simple but I've not found anything that answers my question yet...

I want to split an image into several, so I can clic it or hover it, and create cool interactions on what appears to be a single image. Problem, my image has an undesired space between the rows of the table.

So here is exactly what I mean to do :



<div id="blocfour">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /></td>
<td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /></td>
</tr>
<tr>
<td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png"/></td>
<td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /></td>
</tr>
</table>
</div>





I tried "collapse" in CSS, and other numerous things, but naaah, the damn space is still here - or maybe I did it the wrong way. Any idea how I can get rid of it ?

Answer

You can fix it by changing img's layout to block:

td img{display:block}
<div id="blocfour">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /></td>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /></td>
      </tr>
      <tr>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png"/></td>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /></td>
      </tr>
    </table>
</div>