删除表格单元格和行之间的间距
我正在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”标签…这将掩盖差距而不是白色，它将是灰色的，看起来像灰色标题的一部分。
