HTML таблица не загружается правильно в Outlook - PullRequest
Новая
       25

HTML таблица не загружается правильно в Outlook

0 голосов
/ 25 сентября 2018

У меня есть таблица, в которой первая строка содержит 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>

1 Ответ

0 голосов
/ 26 сентября 2018

Я запускаю ваш код, вы можете заменить ваш код следующим кодом: 

<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();
        }

Это мой результат:

enter image description here

...