删除HTML电子邮件中表格行之间的间距
[英]Remove spacing between table rows in HTML email
问题描述
首先，我说我已经很久没有建立HTML电子邮件了； 我对CSS的宠爱已经太久了，所以回到使用表构建东西的过程令人沮丧。 我很难让两排彼此齐平。 无论我尝试过什么，都无法消除。 在SO上搜寻其他帖子只会产生我已经尝试过但没有奏效的解决方案。 大约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。
3 个解决方案
解决方案1
1
看起来不错; 不错。 另外，您无需将所有CSS详细信息添加到每一行和每一列； 只需添加：或或; 然后在css工作表中（如果没有，只需在其上创建）添加td。无论您决定要命名它还是tr。无论您决定要命名它还是表。任何你决定到名称 - 它。
希望这可以帮助！！！
解决方案2
0 2018-08-31 18:44:55
由于您的img不包含宽度（甚至是auto ），请将其初始化为一个block元素。由于您已经提到了不支持该block的情况，因此我为img添加了display:table 。 我用这个答案添加了工作片段。
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-->
解决方案3
0 已采纳 2018-08-31 18:45:12
由于display:block不是解决方案，因此我尝试删除了<!doctype html>声明，并解决了该问题。 通常，我不认为这是可以接受的，但是据我所知-经过测试，它对HTML电子邮件没有任何负面影响。
删除表格行之间的间距
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.