在 Outlook 中未正确加载 HTML 表答案

【问题标题】：HTML Table not loading correctly in Outlook在 Outlook 中未正确加载 HTML 表
【发布时间】：2019-03-01 08:45:48
【问题描述】：

我有一个表，其中第一行的列跨度为 3，下一行的 3 列包含图像。我尝试了几种形式的包装和 CSS，但无法正确加载电子邮件。这是我修改的代码和我开始的原始代码。我做错了什么？

目前已修改

<html>
<head>
    <style>
        body{width: 100%; height: auto; background-color: #edebf1}
        <!--table{width: 100%; height: auto}-->
        <!--img{width: 100%!important; height: auto!important;}-->
        img{border:none; width: 100% !important;height:auto; line-    height:100%; outline:none;}
        .ExternalClass{width:100%; height: auto;}
        table {width: 100%; height: auto; border-collapse:separate;}
        td{cellpadding:0px; border-spacing:0px;}
        tr{cellpadding:0px; border-spacing:0px;}
    </style>
<title>Webinar Invite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"     marginheight="0">

<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0"     style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
    <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560">
<![endif]-->
        <table id="Table_01" width="8412" height="4183" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3">
                    <img src="images/Webinar-Invite2_01.png" width="8412" height="2619" alt=""></td>
            </tr>
            <tr>
                <td>
                    <img src="images/Webinar-Invite2_02.png" width="3971" height="1564" alt=""></td>
                <td>
                    <a href="Webinar address" target="_Blank"
                    onmouseover="window.status='Registration for Webinar';  return true;"
                    onmouseout="window.status='';  return true;">
                        <img src="images/Webinar-Invite2_03.png" width="2042" height="1564" border="0" alt=""></a></td>
            <td>
                    <img src="images/Webinar-Invite2_04.png" width="2399" height="1564" alt=""></td>
            </tr>
        </table>
<!--[if mso]>
        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
   </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
<![endif]-->

</body>
</html>

原创

<html>
<head>
    <style>
        body{width: 100%; height: auto; background-color: #edebf1}
        table{width: 100%; height: auto}
        img{width: 100%; height: auto}
    </style>
<title>Webinar Invite2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="8412" height="4183" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/Webinar-Invite2_01.png" width="8412" height="2619" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/Webinar-Invite2_02.png" width="3971" height="1564" alt=""></td>
        <td>
            <a href="webinar address" target="_Blank"
                onmouseover="window.status='Registration for Webinar';  return true;"
                onmouseout="window.status='';  return true;">
                <img src="images/Webinar-Invite2_03.png" width="2042" height="1564" border="0" alt=""></a></td>
        <td>
            <img src="images/Webinar-Invite2_04.png" width="2399" height="1564" alt=""></td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

标签： html css outlook fluid-layout

【解决方案1】：

我运行你的代码，你可以用下面的代码替换你的代码：

<html>
<head>
    <style>
        body{width: 100%; height: auto; background-color: white; margin:0;}
        /* img{border:none; width: 100% !important;height:auto; line-height:100%; outline:none; display:inline-block} */
        .ExternalClass{width:100%; height: auto;}
        td{cellpadding:0px; border-spacing:0px;width:20px;height:20px;border: 1px solid #666666;}
        tr{cellpadding:0px; border-spacing:0px;}
        #Table_01{
            width:200px;
            height:200px; 
            border:0;
            border-collapse:separate;
            border: 1px solid #000000;
        }
        .tab_img{
           width:20px; 
            height:20px; 
            display:inline-block;
        }
        .tsb_img1{
            border:0;
        }
    </style>
<title>Webinar Invite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
        <table id="Table_01" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3">
                    <img src="" class="tab_img" alt=""></td>
            </tr>
            <tr>
                <td>
                    <img src=""  class="tab_img" alt=""></td>
                <td>
                    <a href="" target="_Blank"
                    onmouseover="window.status='Registration for Webinar';  return true;"
                    onmouseout="window.status='';  return true;">
                        <img src=" "  class="tab_img "  alt=""></a></td>
                <td>
                    <img src=""  class="tab_img" alt=""></td>
            </tr>
        </table>
</body>
</html>

这是我的 C# 代码：

static void Main(string[] args)
        {
            string stringHtmlBodyfromFile = File.ReadAllText(HTML file path);
             Outlook.Application objOutlook = new Outlook.Application();
            Outlook.MailItem mailItem = (Outlook.MailItem)(objOutlook.CreateItem(Outlook.OlItemType.olMailItem));
            mailItem.To = "";
           mailItem.Subject = "hi";
            mailItem.HTMLBody = stringHtmlBodyfromFile;
            Console.WriteLine(stringHtmlBodyfromFile);
            mailItem.Display();
        }

这是我的结果：

【讨论】：

嗨@Alina，使用您的html，表格在那里，但图像都被扭曲了。第一行中的图像丢失 (colspan="3") 丢失。它在 Outlook 2010 中，不确定这是否有所作为。有什么想法吗？
可以修改图片样式，宽度：20px；高度：auto.第一行的图片，有没有可能是你的图片地址不对
嗨@Alina，网址很好。见下文：imgur.com/a/SVY3H8U 这是我的代码。这是我从你那里得到的。 imgur.com/a/UVrQdhQ
你可以像这样在中添加：图片样式，你可以根据自己的需要设置样式。

没有骰子，结果相同