HTML Email Адаптивная таблица Адаптация

Я пытаюсь создать группу таблиц на мобильных устройствах, как на рабочем столе.HTML Email Адаптивная таблица Адаптация
Это то, что я пытаюсь сделать, но я не могу понять:
Problem & what I am looking for
Вот мой код:
<style type="text/css"> 
 
    } 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
img,a img { 
 
    border: 0; 
 
    height: auto; 
 
    outline: none; 
 
    text-decoration: none; 
 
} 
 
body,#bodyTable,#bodyCell { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#outlook a { 
 
    padding: 0; 
 
} 
 
img { 
 
    -ms-interpolation-mode: bicubic; 
 
} 
 
table { 
 
    mso-table-lspace: 0pt; 
 
    mso-table-rspace: 0pt; 
 
} 
 
.ReadMsgBody { 
 
    width: 100%; 
 
} 
 
.ExternalClass { 
 
    width: 100%; 
 
} 
 
p,a,li,td,blockquote { 
 
    mso-line-height-rule: exactly; 
 
} 
 
a[href^=tel], 
 
a[href^=sms] { 
 
    color: inherit; 
 
    cursor: default; 
 
    text-decoration: none; 
 
}p,a,li,td,body,table,blockquote { 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-text-size-adjust: 100%; 
 
}.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font { 
 
    line-height: 100%; 
 
} 
 
a[x-apple-data-detectors] { 
 
    color: inherit !important; 
 
    text-decoration: none !important; 
 
    font-size: inherit !important; 
 
    font-family: inherit !important; 
 
    font-weight: inherit !important; 
 
    line-height: inherit !important; 
 
} 
 
#bodyCell { 
 
    padding: 10px; 
 
} 
 
.templateContainer { 
 
    max-width: 600px !important; 
 
} 
 
a.mcnButton { 
 
    display: block; 
 
} 
 
.mcnImage { 
 
    vertical-align: bottom; 
 
} 
 
.mcnTextContent { 
 
    word-break: break-word; 
 
} 
 
.mcnTextContent img { 
 
    height: auto !important; 
 
} 
 
.mcnDividerBlock { 
 
    table-layout: fixed !important; 
 
} 
 
.hero-header { 
 
    font-size: 56px; 
 
    line-height: 56px; 
 
    font-family: arial; 
 
    color: #658DA5; 
 
    text-shadow: -1px 0 1px white, -2px -1px 0 #dcd388, -2px 1px 4px lightgray; 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .hero-header { 
 
    padding: 0 18px; 
 
    font-size: 32px; 
 
    line-height: 32px; 
 
    text-shadow: none; 
 
    } 
 
} 
 
body,#bodyTable { 
 
    background-color: #ffffff; 
 
} 
 
#bodyCell { 
 
    border-top: 0; 
 
} 
 
.templateContainer { 
 
    border: 0; 
 
} 
 
#templatePreheader { 
 
    background-color: #FAFAFA; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    padding-top: 9px; 
 
    padding-bottom: 9px; 
 
} 
 
#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p { 
 
    color: #656565; 
 
    font-family: Helvetica; 
 
    font-size: 12px; 
 
    line-height: 150%; 
 
    text-align: left; 
 
} 
 
#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a { 
 
    color: #656565; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
#templateHeader { 
 
    background-color: #FFFFFF; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    padding-top: 9px; 
 
    padding-bottom: 0; 
 
} 
 
#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p { 
 
    color: #202020; 
 
    font-family: Helvetica; 
 
    font-size: 16px; 
 
    line-height: 150%; 
 
    text-align: left; 
 
} 
 
#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a { 
 
    color: #2BAADF; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
#templateBody { 
 
    background-color: #FFFFFF; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
} 
 
#templateBody .mcnTextContent,#templateBody .mcnTextContent p { 
 
    color: #202020; 
 
    font-family: Helvetica; 
 
    font-size: 16px; 
 
    line-height: 150%; 
 
    text-align: left; 
 
} 
 
#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a { 
 
    color: #2BAADF; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
#templateUpperColumns { 
 
    background-color: #FFFFFF; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
} 
 
#templateUpperColumns .columnContainer .mcnTextContent,#templateUpperColumns .columnContainer .mcnTextContent p { 
 
    color: #202020; 
 
    font-family: arial; 
 
    font-size: 16px; 
 
    line-height: 150%; 
 
    text-align: left; 
 
} 
 
#templateUpperColumns .columnContainer .mcnTextContent a,#templateUpperColumns .columnContainer .mcnTextContent p a { 
 
    color: #2BAADF; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
#templateLowerColumns { 
 
    background-color: #FFFFFF; 
 
    border-top: 0; 
 
    border-bottom: 2px solid #EAEAEA; 
 
    padding-top: 0; 
 
    padding-bottom: 9px; 
 
} 
 
#templateLowerColumns .columnContainer .mcnTextContent,#templateLowerColumns .columnContainer .mcnTextContent p { 
 
    color: #202020; 
 
    font-family: arial; 
 
    font-size: 16px; 
 
    line-height: 150%; 
 
    text-align: left; 
 
} 
 
#templateLowerColumns .columnContainer .mcnTextContent a,#templateLowerColumns .columnContainer .mcnTextContent p a { 
 
    color: #2BAADF; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
#templateFooter { 
 
    background-color: #f8f8f8; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    padding-top: 9px; 
 
    padding-bottom: 9px; 
 
} 
 
#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p { 
 
    color: #656565; 
 
    font-family: Helvetica; 
 
    font-size: 12px; 
 
    line-height: 150%; 
 
    text-align: center; 
 
} 
 
#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a { 
 
    color: #656565; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    .templateContainer { 
 
    width: 600px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    body,table,td,p,a,li,blockquote { 
 
    -webkit-text-size-adjust: none !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    body { 
 
    width: 100% !important; 
 
    min-width: 100% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #bodyCell { 
 
    padding-top: 10px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .columnWrapper { 
 
    max-width: 100% !important; 
 
    width: 100% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImage { 
 
    width: 100% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnCaptionTopContent,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer { 
 
    max-width: 100% !important; 
 
    width: 100% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnBoxedTextContentContainer { 
 
    min-width: 100% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImageGroupContent { 
 
    padding: 9px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnCaptionLeftContentOuter .mcnTextContent, 
 
    .mcnCaptionRightContentOuter .mcnTextContent { 
 
    padding-top: 9px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImageCardTopImageContent, 
 
    .mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent { 
 
    padding-top: 18px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImageCardBottomImageContent { 
 
    padding-bottom: 9px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImageGroupBlockInner { 
 
    padding-top: 0 !important; 
 
    padding-bottom: 0 !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImageGroupBlockOuter { 
 
    padding-top: 9px !important; 
 
    padding-bottom: 9px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnTextContent, 
 
    .mcnBoxedTextContentColumn { 
 
    padding-right: 18px !important; 
 
    padding-left: 18px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnImageCardLeftImageContent, 
 
    .mcnImageCardRightImageContent { 
 
    padding-right: 18px !important; 
 
    padding-bottom: 0 !important; 
 
    padding-left: 18px !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcpreview-image-uploader { 
 
    display: none !important; 
 
    width: 100% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    h1 { 
 
    font-size: 22px !important; 
 
    line-height: 125% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    h2 { 
 
    font-size: 20px !important; 
 
    line-height: 125% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    h3 { 
 
    font-size: 18px !important; 
 
    line-height: 125% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    h4 { 
 
    font-size: 16px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    .mcnBoxedTextContentContainer .mcnTextContent, 
 
    .mcnBoxedTextContentContainer .mcnTextContent p { 
 
    font-size: 14px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templatePreheader { 
 
    display: block !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templatePreheader .mcnTextContent, 
 
    #templatePreheader .mcnTextContent p { 
 
    font-size: 14px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templateHeader .mcnTextContent, 
 
    #templateHeader .mcnTextContent p { 
 
    font-size: 16px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templateBody .mcnTextContent, 
 
    #templateBody .mcnTextContent p { 
 
    font-size: 16px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templateUpperColumns .columnContainer .mcnTextContent, 
 
    #templateUpperColumns .columnContainer .mcnTextContent p { 
 
    font-size: 16px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templateLowerColumns .columnContainer .mcnTextContent, 
 
    #templateLowerColumns .columnContainer .mcnTextContent p { 
 
    font-size: 16px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    #templateFooter .mcnTextContent, 
 
    #templateFooter .mcnTextContent p { 
 
    font-size: 14px !important; 
 
    line-height: 150% !important; 
 
    } 
 
} 
 
</style> 
 
</head> 
 

 
<body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    <center> 
 
    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;"> 
 
     <tr> 
 
     <td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 10px;width: 100%;"> 
 

 
      <span width="100%"> 
 
          
 
          </span> 
 
      <tr> 
 
      <td valign="top" id="templateUpperColumns" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
       <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> 
 
    \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t <td align="center" valign="top" width="200" style="width:200px;"> 
 
    \t \t \t \t \t \t \t \t \t <![endif]--> 
 
       <span width="100%"> \t \t <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t <tbody class="mcnCaptionBlockOuter"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" width="false" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody> 
 
    \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 \t \t \t \t \t \t \t \t \t <td class="mcnImage" valign="top" style="padding: 0 0px 0 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;"> 
 
                      <a href="http://toptenliquors.com/events?tribe_venues%5B%5D=3950" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
                      <img align="center" alt="Andover Tasting Calendar" src="https://gallery.mailchimp.com/aff9f1b0278f339e6007bae6f/images/a6c43d95-afba-46f1-9f35-bee25d2039cc.png" style="max-width: 180px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnImage"></a> 
 

 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </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 \t \t \t \t \t \t \t  </tbody> 
 
    </table> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t <td align="center" valign="top" width="200" style="width:200px;"> 
 
    \t \t \t \t \t \t \t \t \t <![endif]--> 
 
    \t \t \t \t \t \t \t \t <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t <tbody class="mcnCaptionBlockOuter"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 

 

 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" width="false" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody> 
 
    \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 \t \t \t \t \t \t \t \t \t <td class="mcnImage" valign="top" style="padding: 0 0px 0 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;"><a href="http://toptenliquors.com/events?tribe_venues%5B%5D=3962" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
                      <img align="center" alt="Blaine Tasting Calendar" src="https://gallery.mailchimp.com/aff9f1b0278f339e6007bae6f/images/eb21b0ff-102c-4cae-b0cb-ecec8c2ecd32.png" style="max-width: 180px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnImage"></a> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </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 \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t </table> 
 
            
 
    \t \t \t \t \t \t \t \t <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t <td align="center" valign="top" width="200" style="width:200px;"> 
 
    \t \t \t \t \t \t \t \t \t <![endif]--> 
 
    \t \t \t \t \t \t \t \t <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t <tbody class="mcnCaptionBlockOuter"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" width="false" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody> 
 
    \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 \t \t \t \t \t \t \t \t \t <td class="mcnImage" valign="top" style="padding: 0 0px 0 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;"><a href="http://toptenliquors.com/events?tribe_venues%5B%5D=5303" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
                      <img align="center" alt="Cottage Grove Tasting Calendar" src="https://gallery.mailchimp.com/aff9f1b0278f339e6007bae6f/images/ebc7f7d0-1448-49cb-adb5-917844b27af3.png" style="max-width: 180px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnImage"></a> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </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 \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t </td> 
 
    \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 \t \t <![endif]--> 
 
    \t \t \t \t \t \t \t </span> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td valign="top" id="templateUpperColumns" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
       <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> 
 
    \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t <td align="center" valign="top" width="200" style="width:200px;"> 
 
    \t \t \t \t \t \t \t \t \t <![endif]--> 
 
       <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
       <tr> 
 
        <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
         <tbody class="mcnCaptionBlockOuter"> 
 
         <tr> 
 
          <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
          <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" width="false" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
           <tbody> 
 
           <tr> 
 
            <td class="mcnImage" valign="top" style="padding: 0 0px 0 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;"> 
 
            <a href="http://toptenliquors.com/events?tribe_venues%5B%5D=5303" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
             <img align="center" alt="Ramsey Tasting Calendar" src="https://gallery.mailchimp.com/aff9f1b0278f339e6007bae6f/images/c042ffa4-ffed-4ef6-a8f3-331ab96ac218.png" style="max-width: 180px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" 
 
             class="mcnImage"> 
 
            </a> 
 
            </td> 
 
           </tr> 
 
           </tbody> 
 
          </table> 
 
          </td> 
 
         </tr> 
 
         </tbody> 
 
        </table> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
       <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t <td align="center" valign="top" width="200" style="width:200px;"> 
 
    \t \t \t \t \t \t \t \t \t <![endif]--> 
 
       <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
       <tr> 
 
        <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
         <tbody class="mcnCaptionBlockOuter"> 
 
         <tr> 
 
          <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 

 

 
          <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" width="false" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
           <tbody> 
 
           <tr> 
 
            <td class="mcnImage" valign="top" style="padding: 0 0px 0 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;"> 
 
            <a href="http://toptenliquors.com/events?tribe_venues%5B%5D=3953" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
             <img align="center" alt="St. Louis Park Events" src="https://gallery.mailchimp.com/aff9f1b0278f339e6007bae6f/images/fb85e468-a3fd-429e-b782-d0cd47134f1d.png" style="max-width: 180px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" 
 
             class="mcnImage"> 
 
            </a> 
 
            </td> 
 
           </tr> 
 
           </tbody> 
 
          </table> 
 
          </td> 
 
         </tr> 
 
         </tbody> 
 
        </table> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
       <!--[if gte mso 9]> 
 
    \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t <td align="center" valign="top" width="200" style="width:200px;"> 
 
    \t \t \t \t \t \t \t \t \t <![endif]--> 
 
       <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
       <tr> 
 
        <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
         <tbody class="mcnCaptionBlockOuter"> 
 
         <tr> 
 
          <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
          <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" width="false" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
           <tbody> 
 
           <tr> 
 
            <td class="mcnImage" valign="top" style="padding: 0 0px 0 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;"> 
 
            <a href="http://toptenliquors.com/events?tribe_venues%5B%5D=3955" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> 
 
             <img align="center" alt="Woodbury Tasting Calendar" src="https://gallery.mailchimp.com/aff9f1b0278f339e6007bae6f/images/08bdf90b-f6a0-413e-94de-45183f0d90ec.png" style="max-width: 180px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" 
 
             class="mcnImage"> 
 
            </a> 
 
            </td> 
 
           </tr> 
 
           </tbody> 
 
          </table> 
 
          </td> 
 
         </tr> 
 
         </tbody> 
 
        </table> 
 
        </td> 
 
       </tr> 
 
       </table>
источник
2017-01-13 Tyler Hitchcock
У меня нет времени для подробного анализа, но то, что выпрыгивает на меня, заключается в том, что у вас есть куча кода «призрак», чтобы заставить поведение рабочего стола в Outlook. Если вы хотите повредить повсеместное поведение рабочего стола, вам нужно удалить условный код MSO и разрешить правило HTML везде. –
Ваш пример выше содержит гибридный и отзывчивый код, чтобы сделать макеты рассылки электронной почты с рабочего стола на мобильный. Похоже, вы хотите удалить это.
Удалите следующий код:
Отзывчивых Классы: Удалите экземпляры class="mcnImage" из и <td> или <img> тега, которые вы не хотите быть полной шириной на мобильном телефоне.
Дух Таблица Markup для Outlook,: удалять экземпляры из , в том числе то, что внутри этих двух тэгов.
После того, как вы удалите код, который делает эту часть электронной почты в ответ, ваш макет должен вернуться к просмотру рабочего стола даже на маленьких экранах.
источник
2017-01-16 15:30:24
HTML Email Адаптивная таблица Адаптация

ответ

Смежные вопросы
