电子邮件 HTML 表在 Gmail 中正确呈现，但在 Outlook 中失败
[英]Email HTML table renders correctly in Gmail but fails in Outlook
问题描述
我正在尝试将简单的 Web HTML 转换为电子邮件 HTML 文件。 我能够将其转换为在 Gmail 中正确呈现但在 Outlook 中失败的表结构。
所有对应的行和列的高度和宽度都正确。 我无法弄清楚它在 Outlook 中中断的原因。
以下是 Gmail 工作案例的屏幕截图：
以下是 Outlook 失败案例的屏幕截图：
小提琴的 HTML 代码： HTML 文件
<html> <head> </head> <body> <center> <div align="left"> <table cellpadding="0" cellspacing="0" height="131" width="750" border="0" style="padding-left:0; padding-right:0; padding-top:1; padding-bottom:1; table-layout:fixed; word-wrap:break-word;"> <tbody> <tr height="0"> <td width="1"></td> <td width="5"></td> <td width="102"></td> <td width="2"></td> <td width="2"></td> <td width="4"></td> <td width="30"></td> <td width="12"></td> <td width="47"></td> <td width="1"></td> <td width="2"></td> <td width="21"></td> <td width="1"></td> <td width="1"></td> <td width="2"></td> <td width="12"></td> <td width="1"></td> <td width="2"></td> <td width="2"></td> <td width="1"></td> <td width="2"></td> <td width="19"></td> <td width="12"></td> <td width="36"></td> <td width="12"></td> <td width="4"></td> <td width="8"></td> <td width="7"></td> <td width="2"></td> <td width="4"></td> <td width="6"></td> <td width="9"></td> <td width="1"></td> <td width="1"></td> <td width="41"></td> <td width="1"></td> <td width="1"></td> <td width="43"></td> <td width="2"></td> <td width="24"></td> <td width="6"></td> <td width="4"></td> <td width="4"></td> <td width="3"></td> <td width="1"></td> <td width="12"></td> <td width="7"></td> <td width="3"></td> <td width="27"></td> <td width="1"></td> <td width="67"></td> <td width="5"></td> <td width="7"></td> <td width="6"></td> <td width="1"></td> <td width="4"></td> <td width="27"></td> <td width="6"></td> <td width="21"></td> <td width="9"></td> <td width="29"></td> <td width="1"></td> <td width="2"></td> <td width="1"></td> <td width="1"></td> <td width="1"></td> <td width="3"></td> <td width="3"></td> <td width="1"></td> <td width="1"></td> </tr> <tr height="4"> <td valign=top rowspan="2" width="1"></td> <td valign=top colspan="67" width="747"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left:0px;font-size: 9pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 9pt;font-family: Arial;text-align:left;">-</span> </p> </div> </td> <td valign=top colspan="2" rowspan="2" width="2"></td> </tr> <tr height="4"> <td valign=top colspan="67" width="747"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left:0px;font-size: 9pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 9pt;font-family: Arial;text-align:left;">-</span> </p> </div> </td> </tr> <tr height="9"> <td valign=top colspan="2" rowspan="3" style="background-color:#072460;" width="6"></td> <td valign=top colspan="25" rowspan="3" style="background-color:#072460;" width="338"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);padding-left: 8px;font-size: 16pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);font-weight: bold;font-size: 16pt;font-family: Arial;text-align:left;">Lorem ipsum dolor sit </span><span style="color: rgb(255,255,255);font-weight: bold;font-size: 16pt;font-family: Arial;text-align:left;">consectetur </span> </p> </div> </td> <td valign=top colspan="42" style="background-color:#072460;" width="405"></td> <td valign=top rowspan="9" width="1"></td> </tr> <tr height="16"> <td valign=top colspan="3" style="background-color:#072460;" width="13"></td> <td valign=top colspan="12" style="background-color:#072460;" width="139"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Vivamus tincidunt:</span> </p> </div> </td> <td valign=top style="background-color:#072460;" width="4"></td> <td valign=top colspan="12" style="background-color:#072460;" width="140"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Vestibulum </span> </p> </div> </td> <td valign=top style="background-color:#072460;" width="4"></td> <td valign=top colspan="9" style="background-color:#072460;" width="97"> <div> <div style="overflow: hidden;word-break: break-word;overflow-x:hidden;overflow-y:hidden;"> <span style="color:rgb(255, 255, 255);direction:ltr;font-family:Arial;font-size:10pt;font-style:normal;font-variant:normal;font-weight:normal;line-height:100%;text-decoration:none;vertical-align:baseline;white-space:normal;"> <div style="text-align:right;"><a href="https://www.lipsum.com/feed/html" style="color:rgb(255, 255, 255);font-size:10pt;text-decoration:underline;">Lorem Ipsum</a></div> </span> </div> </div> </td> <td valign=top colspan="4" style="background-color:#072460;" width="8"></td> </tr> <tr height="27"> <td valign=top colspan="42" style="background-color:#072460;" width="405"></td> </tr> <tr height="16"> <td valign=top colspan="30" rowspan="4" style="background-color:#072460;" width="357"></td> <td valign=top colspan="13" style="background-color:#072460;" width="143"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Nulla convallis:</span> </p> </div> </td> <td valign=top colspan="12" style="background-color:#072460;" width="140"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Aliquam amet</span> </p> </div> </td> <td valign=top style="background-color:#072460;" width="4"></td> <td valign=top colspan="9" style="background-color:#072460;" width="97"> <div> <div style="overflow: hidden;word-break: break-word;overflow-x:hidden;overflow-y:hidden;"> <span style="color:rgb(255, 255, 255);direction:ltr;font-family:Arial;font-size:10pt;font-style:normal;font-variant:normal;font-weight:normal;line-height:100%;text-decoration:none;vertical-align:baseline;white-space:normal;"> <div style="text-align:right;"><a href="https://www.lipsum.com/feed/html" style="color:rgb(255, 255, 255);font-size:10pt;text-decoration:underline;">Phasellus</a></div> </span> </div> </div> </td> <td valign=top colspan="4" rowspan="4" style="background-color:#072460;" width="8"></td> </tr> <tr height="16"> <td valign=top colspan="13" style="background-color:#072460;" width="143"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Donec eget velit:</span> </p> </div> </td> <td valign=top colspan="22" style="background-color:#072460;" width="241"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Nunc metus</span> </p> </div> </td> </tr> <tr height="16"> <td valign=top colspan="13" style="background-color:#072460;" width="143"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Duis rhoncus enim:</span> </p> </div> </td> <td valign=top colspan="22" style="background-color:#072460;" width="241"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Vivamus </span> </p> </div> </td> </tr> <tr height="16"> <td valign=top colspan="13" style="background-color:#072460;" width="143"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Praesent laoreet:</span> </p> </div> </td> <td valign=top colspan="22" style="background-color:#072460;" width="241"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Pellentesque </span> </p> </div> </td> </tr> <tr height="3"> <td valign=top colspan="69" style="background-color:#072460;" width="749"></td> </tr> <tr height="4"> <td valign=top colspan="2" style="background-color:#072460;" width="6"></td> <td valign=top colspan="63" style="background-color:#072460;" width="735"> <div> <p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(7,36,96);white-space: nowrap;padding-left:0px;font-size: 9pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(7,36,96);white-space:nowrap;font-size: 9pt;font-family: Arial;text-align:left;">-</span> </p> </div> </td> <td valign=top colspan="4" style="background-color:#072460;" width="8"></td> </tr> </tbody> </table> </div> </center> </body> </html>
您能否让我知道如何在 Gmail 和 Outlook 中使其正确且一致？
提前致谢。
1 个解决方案
解决方案1
0 2020-01-01 22:16:48
检查所有<td>元素是否具有背景颜色。
或者，您可以将整个表格包装在另一个具有背景颜色的表格中，如下所示：
<table>
<tr>
<td bgcolor="#072460">
...
</td>
</tr>
</table>
如果您不希望顶行具有颜色，请为它们放置一个带有白色 bgcolor 的包装表 - 或者将它们完全移除（为什么它们甚至在那里......）。
如何从Outlook发送HTML电子邮件模板，以便在Gmail中正确呈现？
[英]How to send an HTML email template from Outlook so that it renders properly in Gmail?
在 Outlook 中呈现时，如何从电子邮件签名中的 HTML 表格单元格顶部删除白线？
[英]How to remove white lines from top of HTML table cells in email signature when it renders in Outlook?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML电子邮件在Outlook中呈现更大的尺寸
HTML电子邮件在Gmail中失败
如何从Outlook发送HTML电子邮件模板，以便在Gmail中正确呈现？
html电子邮件表格，显示Outlook.com和gmail之间的差距
HTML：Outlook 无法正确渲染 email
在 Outlook 中呈现时，如何从电子邮件签名中的 HTML 表格单元格顶部删除白线？
表格之间的HTML电子邮件空间（Gmail和Outlook）
HTML电子邮件：MS Outlook和Gmail中未显示图像
HTML表无法在Outlook中正确加载
HTML电子邮件文本无法在Gmail移动中正确显示
相关标签