0
Ich habe ein Problem mit, wie Outlook seit einer Weile Tabelle HTML angezeigt hat, und ich konnte dieses Problem für das Leben von mir nicht lösen. Grundsätzlich gibt es eine Zeile, die beim Verschachteln von Tabellen den Inhalt <td> durchschneidet (siehe die graue Linie im angehängten Bild rechts neben dem lila <td>).Outlook 2016 Einfügen von dünnen Linien unter verschachtelten Tabellen
Dies ist auf Code E-Mail ich mit als Beispiel gearbeitet haben.
<style type="text/css">
@media only screen and (max-width:480px){
\t \t
\t \t .templateColumns{
\t \t \t width: 100% !important;
\t \t }
\t \t
\t \t .body-text {
\t \t \t font-size: 16px !important;
\t \t }
\t \t
\t \t .body-about-us {
\t \t \t font-size: 15px !important;
\t \t }
\t \t
\t \t .center-align {
\t \t \t text-align: center !important;
\t \t } \t
\t \t
\t \t .column-image {
\t \t \t height:auto !important;
max-width:480px !important;
width: 100% !important;
\t \t }
\t \t .column-container {
\t \t \t display: block !important;
\t \t \t width: 100% !important;
\t \t }
\t \t
\t \t .sociologos-container {
\t \t \t text-align: center !important;
\t \t \t margin-left: auto !important;
\t \t \t margin-right: auto !important;
\t \t \t padding-top: 15px !important;
\t \t \t padding-bottom: 5px !important;
\t \t }
\t \t
\t \t .mopad-left {
\t \t \t padding-left: 15px !important;
\t \t }
\t \t .mopad-right {
\t \t \t padding-right: 15px !important;
\t \t }
\t \t
\t \t .mopad-top {
\t \t \t padding-top: 15px !important;
\t \t }
\t \t .mopad-bottom {
\t \t \t padding-bottom: 15px !important;
\t \t }
\t \t
\t \t .mopad-button-bottom {
\t \t \t padding-bottom: 30px !important;
\t \t }
\t \t
\t \t .nopad-bottom {
\t \t \t padding-bottom: 0 !important;
\t \t } \t
\t \t
\t \t .nopad-top {
\t \t \t padding-top: 0 !important;
\t \t }
\t \t
\t \t .nopad-left {
\t \t \t padding-left: 0 !important;
\t \t }
\t \t
\t \t .nopad-right {
\t \t \t padding-right: 0 !important;
\t \t }
\t \t
\t \t .modisplay-none {
\t \t \t display: none !important;
\t \t } \t
\t \t
\t \t .mainbtn {
max-width: 450px !important;
width: 100% !important;
\t \t \t margin-top: 10px !important;
}
.mainbtn a{
display:block !important;
\t \t }
\t \t
\t \t .mobold {
\t \t \t font-weight: bold !important;
\t \t } \t
\t \t
\t \t .heading {
\t \t \t font-size: 32px !important;
\t \t \t line-height: 36px !important;
\t \t }
\t \t
\t \t .heading2 {
\t \t \t font-size: 24px !important;
\t \t \t line-height: 28px !important;
\t \t } \t
\t \t
\t \t .heading3 {
\t \t \t font-size: 20px !important;
\t \t \t line-height: 20px !important;
\t \t } \t
\t \t
\t \t .sociologos {
\t \t \t width: 32px !important;
\t \t \t height: 32px !important;
\t \t }
\t \t
\t \t .join-us {
\t \t \t text-align: center !important;
\t \t }
\t }
\t p {margin-bottom: 25px;
\t margin-top:10px;}
</style><body vlink="#421b3e" style="margin:0; padding: 0; background-color:#f2f2f2;"><!--this sets the visited link color, a background color and eliminates any potential auto padding on the page-->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="bodytable" style="background-color:#f2f2f2; font-family: Arial, Helvetica, sans-serif;">
\t <tr>
\t \t <td align="center" valign="top" style="padding-top:0px;">
\t \t \t <table border="0" cellpadding="0" cellspacing="0" width="580" class="templateColumns mopad-bottom nopad-top mopad-left mopad-right" style=" background-color: #f2f2f2; padding-top: 0; padding-bottom: 25px; margin:0;">
\t \t \t \t
\t \t \t \t <!-- start PURPLE HEADER -->
\t \t \t \t <tr>
\t \t \t \t \t <td width="100%" align="center" valign="top" class="templateColumns mopad-left mopad-right mopad-top mopad-bottom" id="logo" style="margin:0; background-color: #f2f2f2; padding-top: 20px; padding-bottom: 20px;">
\t \t \t \t \t \t LOREM IPSUM
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <!-- end PURPLE HEADER -->
\t \t \t \t
\t \t \t \t
\t \t \t \t <!-- start INTRO SECTION -->
\t \t \t \t <tr>
\t \t \t \t \t <td align="center" valign="top" class="templateColumns" width="100%" style="background-color: #ffffff; padding: margin:0;"><img class="column-image" src="http://go.advicentsolutions.com/rs/841-KAP-325/images/FosteringGrowth2016TitleBanner.png" alt="Nurturing Growth" width="580" style="display:block;" /></td>
\t \t \t \t </tr>
\t \t \t \t <!-- end INTRO SECTION -->
\t \t \t \t <!-- start FIRST CONTENT SECTION -->
\t \t \t \t \t
\t \t \t <tr>
\t \t \t \t \t <td width="100%" class="mopad-left mopad-right mkteditable" id="primary-content" style="background-color: #ffffff; font-family: Arial, sans-serif; padding-top:15px; padding-bottom:30px; padding-left:40px; padding-right:40px;">
\t \t \t \t \t \t <!--<h3 class="body-text mopad-right mopad-left" style="font-family: Arial, sans-serif; font-size: 17px; color: #3c3d42; letter-spacing: -.25px; line-height: 1.5em; font-weight: bold; margin:0; padding: 0 0 5px 0; ">Did you know?</h3>-->
\t \t \t \t \t <p class="heading2" style="text-align:center; font-size: 28px; color: #3c3d42; line-height: 30px;">lorem ipsum</p>
\t \t \t \t \t \t <p class="margin" style="text-align:center; font-family: Arial, sans-serif; font-size: 16px; color: #727577; line-height: 22px; font-weight: 400; ">lorem ipsum</p>
\t \t \t \t \t \t <table align="center" cellpadding="0" cellspacing="0" width="60%" style="background-color:#6a3757; border-radius: 2px; font-family: Arial, sans-serif; padding:2px; margin: auto;">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center" style="font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; background-color: #6a3757; padding-top: 10px; padding-bottom: 10px;"><strong>lorem ipsum</strong></td>
\t \t \t \t \t \t \t </tr> \t
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <!-- end MAIN CTA BUTTON -->
\t \t \t \t
\t \t \t \t
\t \t \t \t
\t \t \t \t \t \t
\t \t \t \t
\t \t \t \t <!-- start SOCIAL MEDIA SECTION -->
\t \t \t \t <tr>
\t \t \t \t \t <td width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="social-media" style="font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; padding-top: 10px; margin:0; ">
\t \t \t \t \t \t <table width="100%" border="0" cellpadding="0" cellspacing="0">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="left" valign="middle" class="column-container join-us" width="50%" style="font-family: Arial, sans-serif; font-size: 14px; color: #3c3d42; ">
\t \t \t \t \t \t \t \t \t Join the Community!
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td aLOREM IPSUM class="column-container" width="50%">
\t \t \t \t \t \t \t \t \t <table cellpadding="0" class="sociologos-container" cellspacing="0" style="font-family: Arial, sans-serif;">
\t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t <td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/google_42.png" width="32" height="32" alt="Google Plus" /></td>
\t \t \t \t \t \t \t \t \t \t \t <td align="left" class="sociologos" valign="top" style="padding-left: 5px;">><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/twitter_42.png" width="32" height="32" alt="Twitter" /></td>
\t \t \t \t \t \t \t \t \t \t \t <td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/facebook_42.png" width="32" height="32" alt="Facebook" /></td>
\t \t \t \t \t \t \t \t \t \t \t <td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/linked_42.png" width="32" height="32" alt="LinkedIn" /></td>
\t \t \t \t \t \t \t \t \t \t \t <td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" class="sociologos" style="display: block; padding-left:5px;" src="http://www.advicentsolutions.com/images/email/youtube_42.png" width="32" height="32" alt="Youtube Channel" /></td>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <!-- end SOCIAL MEDIA SECTION -->
\t \t \t \t
\t \t \t \t
\t \t \t \t <!-- start DISCLAIMER -->
\t \t \t \t <tr>
\t \t \t \t \t <td align="left" valign="top" width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="disclaimer" style="color:#727577; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 5px; padding-right:5px; padding-top:10px; margin:0;">
\t \t \t \t \t LOREM ISPUM
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <!-- end DISCLAIMER -->
\t \t \t \t \t \t
\t \t \t \t \t
\t \t \t </table>
\t \t </td>
</tr>
</table>
</body>Es zeigt als HTML in Ordnung, aber ich sende meist B2B Sachen, die bedeutet, dass wir immer für das Büro zu optimieren versucht. Manchmal kann die Dimensionierung des Bannerbildes dies beeinflussen, aber abgesehen von diesem einen Faktor erscheint es völlig willkürlich, wenn dies geschieht. Es ist die eine Outlook-Problemumgehung, die ich nicht herausfinden konnte. Gibt es etwas in meinem Code, das ich vermisse?