开发者

html images in table with no space

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 spa开发者_运维问答ce between the td's
    <td><img ... /></td>
  </tr>
</table>


One more thing that can avoid unwanted space between images:

<td style="line-height:0;">


Apply this css:

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

This resets all spaces to 0.


cellspacing and cellpadding should be 0 on the table.

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


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜