删除 HTML 电子邮件中 table 行之间的间距

Question

首先让我说一下，我已经很长时间没有建立 HTML 电子邮件了；我被 CSS 宠坏了太久了，所以回到用表格构建东西是非常令人沮丧的。我很难让两排彼此齐平；无论我尝试过什么，我都无法消除差距。在 S.O 上搜索其他帖子。只产生我已经尝试过但没有奏效的解决方案。大约 40% 的目标受众在 Outlook 上查看电子邮件，这意味着 CSS 支持非常有限。我尝试过的事情：

border-collapse:collapse（我从一开始就默认设置了）
设置保证金：0（几乎所有地方）
cellspacing 和 cellpadding 为零（我在构建表格时已经默认这样做了）。
display:block 和 display:inline-block（Outlook 并不真正支持，但无论如何都没有解决我的问题）。

这是我的代码片段（忽略任何 CSS 类；同样还没有任何嵌入式 CSS，此时这些只是占位符。任何嵌入式 CSS 将主要用于处理特定于电子邮件客户端的问题。）

<!--2 Column Layout : BEGIN-->
<tr>
  <td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
      <tr>
        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>

        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!--2 Column Layout : END-->

<!--2nd Hero Image : BEGIN-->
<tr>
  <td class="full-width-image">
    <img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
  </td>
</tr>
<!--Hero Image : END-->

如果仔细观察，可以看到行底部的小缝隙。高度为4px。

Answer 1

看起来不错；不错。此外，您不需要将所有 css 详细信息添加到每一行和每一列；只需添加：或或；然后在你的 css sheet （如果你没有它然后就创建）添加 td.Whatever-you-decide-to-name-it 或 tr.Whatever-您决定命名它或 table.Whatever-您决定命名它。

希望对您有所帮助！！！

Answer 2

因为你的 img 不包含宽度（甚至 auto），将它初始化为一个块 element.Since 你提到你的情况不支持块我添加 display:table 为您的 img。我用这个答案添加了工作片段。

img {
  display: table;
}

<!--2 Column Layout : BEGIN-->
<tr>
  <td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
      <tr>
        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>

        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!--2 Column Layout : END-->

<!--2nd Hero Image : BEGIN-->
<tr>
  <td class="full-width-image">
    <img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
  </td>
</tr>
<!--Hero Image : END-->

Answer 3

由于 display:block 不是解决方案，我尝试删除 <!doctype html> 声明并解决了问题。通常我不认为这是可以接受的，但据我所知 - 并且在测试之后 - 它对 HTML email.[= 没有任何负面影响12=]

删除 HTML 电子邮件中 table 行之间的间距

Remove spacing between table rows in HTML email

html

css

html-table

html-email

删除 HTML 电子邮件中 ​​table 行之间的间距

Remove spacing between table rows in HTML email

html

css

html-table

html-email

删除 HTML 电子邮件中 table 行之间的间距