删除表格单元格和行之间的间距

我正在devise一个HTML电子邮件模板,这迫使我使用表格 。 在下面的代码中,我遇到了麻烦(1)删除占位符图像下面的间距和(2)删除图像和标题之间的空间。 以下是OS X 10.6.8上的Chrome 15的屏幕截图:

在这里输入图像说明

<!DOCTYPE HTML> <html> <head> <title>Email Template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0"> <tr> <td id="main" style="background-color: #f2f2f2;"> <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2> <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;"> <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr> <tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr> </table><!--/.main-story-image--> <p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p> <p><a href="">Click here to read more </a></p> <div style="clear: both;"></div> </td><!--/#main--> </tr> </table> </body> </html> 

红色的边框只是为了显示细胞的轮廓。 我不想让他们在最后的版本。

它看起来像DOCTYPE导致图像显示为内联元素。 如果我添加display: block图像,问题解决了。

添加border-collapse: collapse内部 table元素的style属性值中。 你也可以在那里添加属性cellspacing=0 ,但是你会在单元格之间有一个双边框。

即:

 <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse"> 

您有两次cellspacing="0" ,请尝试用cellpadding="0"代替第二个。

没有任何工作。 该问题的解决scheme是。

 <style> table td { padding: 0; } </style> 

在具有图像的父TD使用font-size:0

我有一个类似的问题,我解决了(内联)样式的TD元素如下:

 <td style="display: block;"> 

这将起作用,虽然它不是最好的做法。 在我的情况下,我正在使用HTML表格进行样式化的旧模板。

你好@andrew提到使cellpadding = 0 ,你仍然可能有一些空间,因为你正在使用table border=1

display:block放在单元格的css中, valign="top"应该可以实现

我有一个类似的问题。 这帮助我横跨主要电子邮件客户端。 加:

  • 属性cellpadding="0"cellspacing="0"border="0"
  • 风格border-collapse: collapse; 到桌子
  • 样式padding: 0; margin: 0; padding: 0; margin: 0; 到每个元素
  • 和样式font-size: 0px; line-height: 0px; font-size: 0px; line-height: 0px; 到不是空的每个元素

如果标题框是灰色的,那么你可以尝试将图像和标题包裹在一个具有相同背景颜色灰色的div中 – 所以在“tr”标签之前有一个“div”标签…这将掩盖差距而不是白色,它将是灰色的,看起来像灰色标题的一部分。