Question

我正在设计一个HTML电子邮件模板，forces me to use tables。在下面的代码中，我遇到了问题（1）删除了占位符图像下面的间距，以及（2）删除了图像和标题之间的空格。以下是OS X 10.6.8上Chrome 15的外观截图：

enter image description here

<!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>

红色边框只显示细胞的轮廓。我不希望他们在最终版本中出现。

Answer 1

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

Answer 2

将border-collapse: collapse添加到内部 style元素的table属性值中。您也可以在那里添加属性cellspacing=0，但之后您将在单元格之间添加双边框。

即：

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

Answer 3

您有cellspacing="0"两次，请尝试使用cellpadding="0"替换第二个。

Answer 4

没有任何效果。该问题的解决方案是。

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

Answer 5

我有类似的问题。这有助于我跨主要电子邮件客户端。添加：

将属性cellpadding="0"，cellspacing="0"和border="0"添加到表格
样式border-collapse: collapse;到表格
将样式padding: 0; margin: 0;添加到每个元素
并将样式font-size: 0px; line-height: 0px;添加到每个空元素

Answer 6

在包含图片的父font-size:0中使用TD。

Answer 7

我有类似的问题，我通过（内联）样式化td元素解决了它，如下所示：

<td style="display: block;">

虽然这不是最佳做法，但仍然有效。就我而言，我正在处理一个使用HTML表格设置样式的旧模板。

Answer 8

大家好，因为@andrew提到了make cellpadding = 0，当你使用table border=1时，你仍然可能有一些空间。

Answer 9

将display:block放在单元格的css上，将valign="top"放在应该做的诀窍

Answer 10

如果您看到表类，它具有边框间距：2px;您可以在CSS中覆盖表格类，并设置其边框间距：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;   }

它挽救了我的一天。希望对您有所帮助。谢谢。

Answer 11

如果标题框是灰色的，那么您可以尝试将图像和标题包装在具有相同背景颜色灰色的div中 - 这样一个＆＃34; div＆＃34; ＆＃34; tr＆＃34;之前的标签tag ...这将掩盖间隙，因为它不是白色，而是灰色，看起来像灰色标题的一部分。

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

11 个答案: