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

【问题标题】：Remove spacing between table cells and rows删除表格单元格和行之间的间距
【发布时间】：2012-01-18 17:29:27
【问题描述】：

我正在设计一个 HTML 电子邮件模板，forces me to use tables。在下面的代码中，我遇到了问题（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>

红色边框仅用于显示单元格的轮廓。我不希望它们出现在最终版本中。

【问题讨论】：

我能够通过将 cellspacing="0" 和 cellpadding="0" 添加到内部表格元素来解决问题 (2)。然而，第一个问题仍然存在。我无法弄清楚为什么在同一个单元格中的图像下方有额外的像素。帮忙？
"边框间距：0；"在 CSS 中对我有用...
你好@JoeMornin，我面临同样的问题，但不同的是，在桌面上tr 显示正确，但在移动设备上显示tr 之间的间距，我尝试了所有这里提到的但没有工作为了我。如果您有任何想法，请分享。

标签： css html-table html-email

【解决方案1】：

如果你看到表格类它有边框间距：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;   }

它拯救了我的一天。希望它会有所帮助。谢谢。

【讨论】：

【解决方案2】：

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

将cellpadding="0"、cellspacing="0" 和border="0" 属性分配给表格
样式border-collapse: collapse; 到表格
样式 padding: 0; margin: 0; 到每个元素
为每个空元素设置font-size: 0px; line-height: 0px;样式

【讨论】：

为了完整起见：在我的例子中（我想删除 [empty] 单元格之间的间距），只需要属性（实际上，只需要 cellspacing='0'）。所有样式都没有改变，在我将属性添加到表格标签后，根本不需要任何样式。在 FF 和 Chrome 中工作。
是的，此解决方案适用于您的情况，因为您正在解决在浏览器（而不是电子邮件客户端）中显示的 HTML 模板中删除单元格之间的空格的问题。但是，这个问题解决了删除电子邮件模板中元素之间的空格的问题，所以这个问题比你的更复杂。
观察得很好。我没有意识到这个问题是针对电子邮件模板的。我的错。

【解决方案3】：

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

【讨论】：

不推荐在<tr> 元素之间放置<div>

【解决方案4】：

将display:block 放在单元格的css 上，valign="top" 应该可以解决问题

【讨论】：

【解决方案5】：

您好，正如 @andrew 提到的 make cellpadding = 0，您在使用 table border=1 时可能还有一些空间。

【讨论】：

【解决方案6】：

在具有图像的父级TD 中使用了font-size:0。

【讨论】：

【解决方案7】：

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

<td style="display: block;">

这将起作用，尽管它不是最佳做法。在我的例子中，我正在处理一个使用 HTML 表格设置样式的旧模板。

【讨论】：

【解决方案8】：

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

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

【讨论】：

旧帖子但为我节省了一些时间，无法弄清楚导致填充的原因。 Tnx！

【解决方案9】：

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

【讨论】：

但是如果我们在一个 td 中有多个图像，它会破坏它。
谢谢！像魅力一样工作！
谢谢，完美。很多人总是建议border-collapse:collapse;

【解决方案10】：

将border-collapse: collapse 添加到inner table 元素的style 属性值中。您也可以在此处添加属性cellspacing=0，但单元格之间会出现双边框。

即：

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

【讨论】：

我认为您误解了这个问题。边框只是占位符，所以我可以看到单元格的轮廓。问题是图片下方有多余的空间。
我也有这个技巧：display: inline-block;内表和填充：1em；和边框：0.5px 纯灰色；在 td/th 内。

【解决方案11】：

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

【讨论】：