5

I have an html table in which I am placing images side by side inside the td's. How can I get it so that there is no space at all between each image? By default all browsers seem to put in a small space despite 0 padding and margin on each table element. I am not specifying a width on the td's so by default it takes up the width of the image inside of it.

i.e:

<table>
  <tr>
    <td><img ... /></td> //no space between the td's
    <td><img ... /></td>
  </tr>
</table>
1
  • You should post your CSS, even if it is simple... Sep 29, 2010 at 20:20

5 Answers 5

12

One more thing that can avoid unwanted space between images:

<td style="line-height:0;">
1
  • This is the only solution works for me, tried to set all other spacing, padding, border... without success Aug 10, 2019 at 19:53
7

Apply this css:

td, tr, img  { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse; }

This resets all spaces to 0.

2

cellspacing and cellpadding should be 0 on the table.

<table cellspacing="0" cellpadding="0">
  <tr>
    <td><img></td> 
    <td><img></td>
  </tr>
</table>
0

Take a look at cellpadding, border, and cellspacing attributes for the HTML table tag. If you are using XHTML or CSS, then check out the corresponding styles - border-collapse, padding, etc.

0

On my situation, I am trying to continue coding photoshop / imageready splitted html (generated via slice tool or save for web).

If table have a "height" attribute and you replace some images with shorter content, table maintain height adding mysterios gaps between images.

All I have to remove the height. Simple and stupid, but this is a situation can happen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.