删除表格单元格和行之间的间距
Joe*_*nin 46 css html-table html-email
我正在设计一个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>
红色边框只显示细胞的轮廓.我不希望他们在最终版本中出现.
Joe*_*nin 60
看起来像DOCTYPE导致图像显示为内联元素.如果我添加display: block到图像,问题就解决了.
- 谢谢，作品完美。对许多人来说，总是建议`border-collapse：collapse;`。 (2认同)
Juk*_*ela 52
添加border-collapse: collapse到内部元素的style属性值中.您也可以在那里添加属性,但是在单元格之间会有双边框. tablecellspacing=0
即:
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
我有一个类似的问题。这可以帮助我跨主要的电子邮件客户端。加：
- 属性
cellpadding="0"，cellspacing="0"并border="0"以表 border-collapse: collapse;表样式padding: 0; margin: 0;每个元素的样式- 和
font-size: 0px; line-height: 0px;每个空元素的样式
小智 5
没事。该问题的解决方案是。
<style>
table td {
padding: 0;
}
</style>
如果你看到表格类，它有边框间距：2px；您可以在 css 中覆盖 table 类并设置其边框间距：0px!important in table; 我这样做了
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }
它拯救了我的一天。希望它会有所帮助。谢谢。