Image split into table: Remove space between rows

Question

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 ?

Possible duplicate of [How to remove unwanted space between rows and columns in table?](http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) — DavidDomain, Jul 08 '16 at 13:41

score 1 · Accepted Answer · answered Jul 08 '16 at 13:34

1

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>

answered Jul 08 '16 at 13:34

potashin

44,205
11
83
107

Thanks for your answer. I tried it on my website but it looks like my problem is not that simple eventually. The wordpress theme includes already so many CSS, it does not help... :S Here is the link where I'm trying (and struggling) to set this up : http://cuisines-et-bains.com/script-test/ Any idea what i should do ? – GaletteRaclette Jul 08 '16 at 14:05
@GaletteRaclette: you can use it with `!important` to rewrite wordpress stylings. – potashin Jul 08 '16 at 14:06
1

Ow yes ! That worked :) So i just added this line to my CSS : td img{ display:block !important; } Thanks a lot. – GaletteRaclette Jul 08 '16 at 14:39

score 0 · Answer 2 · answered Jul 08 '16 at 13:34

If you use text in the table you can reset font-size for table cells in CSS.

table {
  font-size: 0;
}

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

Image split into table: Remove space between rows

2 Answers2