电子邮件 HTML 表在 Gmail 中正确呈现，但在 Outlook 中失败
[英]Email HTML table renders correctly in Gmail but fails in Outlook
问题描述
I'm trying to convert a simple Web HTML into an Email HTML file.
我正在尝试将简单的 Web HTML 转换为电子邮件 HTML 文件。 I was able to convert it into table structure which renders properly in Gmail but fails in Outlook.我能够将其转换为在 Gmail 中正确呈现但在 Outlook 中失败的表结构。
The height and width of all the corresponding rows and columns are correct.所有对应的行和列的高度和宽度都正确。 I'm not able to figure out the reason why it breaks in Outlook.我无法弄清楚它在 Outlook 中中断的原因。
Below is a screenshot of the working case from Gmail:以下是 Gmail 工作案例的屏幕截图：
Below is a screenshot of the failing case from Outlook :以下是 Outlook 失败案例的屏幕截图：
Fiddle for the HTML code : HTML file小提琴的 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>
Can you please let me know how to make it correct and consistent across both Gmail and Outlook?您能否让我知道如何在 Gmail 和 Outlook 中使其正确且一致？
Thanks in advance.提前致谢。
1 个解决方案
解决方案1
0 2020-01-01 22:16:48
Check all your <td> elements have the background color.检查所有<td>元素是否具有背景颜色。
Alternatively, you can just wrap the entire table in another table that has the background-color, like so:或者，您可以将整个表格包装在另一个具有背景颜色的表格中，如下所示：
<table>
<tr>
<td bgcolor="#072460">
...
</td>
</tr>
</table>
If you don't want the top rows to have a color, put a wrapping table in for them with a white bgcolor - or remove them entirely (why are they even there...).如果您不希望顶行具有颜色，请为它们放置一个带有白色 bgcolor 的包装表 - 或者将它们完全移除（为什么它们甚至在那里......）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML电子邮件在Outlook中呈现更大的尺寸 - HTML Email renders larger in Outlook
HTML电子邮件在Gmail中失败 - Html email fails in Gmail
如何从Outlook发送HTML电子邮件模板，以便在Gmail中正确呈现？ - How to send an HTML email template from Outlook so that it renders properly in Gmail?
html电子邮件表格，显示Outlook.com和gmail之间的差距 - html email table showing gaps in outlook.com and gmail
HTML：Outlook 无法正确渲染 email - HTML: Outlook not rendering correctly email
在 Outlook 中呈现时，如何从电子邮件签名中的 HTML 表格单元格顶部删除白线？ - How to remove white lines from top of HTML table cells in email signature when it renders in Outlook?
表格之间的HTML电子邮件空间（Gmail和Outlook） - HTML Email spaces between tables (Gmail and Outlook)
HTML电子邮件：MS Outlook和Gmail中未显示图像 - HTML Email: Images are not showing in MS Outlook and Gmail
HTML表无法在Outlook中正确加载 - HTML Table not loading correctly in Outlook
HTML电子邮件文本无法在Gmail移动中正确显示 - HTML email text not displaying correctly in Gmail Mobile
相关标签