So I am creating an email template, i have included a table inside, but as you can see from the code when it displays, it doesnt shows table border. I want to have the normal single line table border. I have tried adding in "class="table table-bordered" but it still doesnt show me the border. How can i solve this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
img {
max-width: 100%;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
#cta1 a {
text-decoration: none !important;
color: #FFFFFF !important;
}
.no-spacing {
padding:0px;
margin: 0px;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
table[class="body"] .columns td {
padding-top: 10px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
.mobile-center {
text-align: left !important;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
.mobile-center {
text-align: left !important;
}
.center-mobile {
text-align: center;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
table[class="body"] table.column td .list {
width: auto !important;
}
table[class="body"] img {
width: auto !important;
height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
table[class="body"] .container {
width: 100% !important;
}
table[class="body"] .row {
width: 100% !important;
display: block !important;
}
table[class="body"] .wrapper {
display: block !important;
padding-right: 0 !important;
}
table[class="body"] .columns {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .column {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .wrapper.first .columns {
display: table !important;
}
table[class="body"] .wrapper.first .column {
display: table !important;
}
table[class="body"] table.columns td {
width: 100% !important;
}
table[class="body"] table.column td {
width: 100% !important;
}
table[class="body"] .columns td {
width: 100% !important;
display: block;
}
table[class="body"] .column td {
width: 100% !important;
display: block;
}
table[class="body"] td.offset-by-one {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-two {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-three {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-four {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-five {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-six {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-seven {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eight {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-nine {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-ten {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eleven {
padding-left: 0 !important;
}
table[class="body"] table.columns td.expander {
width: 1px !important;
}
table[class="body"] .right-text-pad {
padding-left: 10px !important;
}
table[class="body"] .text-pad-right {
padding-left: 10px !important;
}
table[class="body"] .left-text-pad {
padding-right: 10px !important;
}
table[class="body"] .text-pad-left {
padding-right: 10px !important;
}
table[class="body"] .hide-for-small {
display: none !important;
}
table[class="body"] .show-for-desktop {
display: none !important;
}
table[class="body"] .show-for-small {
display: inherit !important;
}
table[class="body"] .hide-for-desktop {
display: inherit !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; margin:0; padding:0; background:#eeeeee; ">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0;" align="left" bgcolor="#353937">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p class="no-spacing" style="margin: 30px;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major-Infrastructure-Issue_Email-Template_Logo.png" alt="eO Logo.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simple" mktoname="content-intro-simple">
<td style="padding: 20px 40px 10px 40px">
<div class="mktEditable" id="heading-simple" style="" mktoname="heading-simple">
<p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Customer Action Required.png" /> <br /> <br /></p>
<h4 style="color: #2ea049; font-size: 18px; line-height: 100%; margin: 0; padding: 0;">Upcoming Security Changes</h4>
<div>
<br />
</div>
<p><b>Customer Name,</b></p>
<p>We are committed to ensuring the highest level of security standards for your most valuable digital assets. This email is requesting your partnership on some important security initiatives.</p>
</div> </td>
</tr>
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone">
<td style="padding: 20px 40px; background-color:#EFF2F2">
<table style="width:100%; background-color:white">
<tbody>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_What.png" /></td>
<td style="width:70%; padding: 15px;">eOriginal is upgrading both our password acceptance criteria and the connection types our solution supports.</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_When.png" /></td>
<td style="width:70%;padding: 15px;">Upgrades take effect <span style="color: orange"><strong>March 29th</strong></span> for Preview on Demand, <span style="color: orange"><strong>April 26th</strong></span> for Test on Demand, and <span style="color: orange"><strong>April 28th</strong></span> for Production on Demand.</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Action Required_orange.png" /></td>
<td style="width:70%; padding: 15px;"><span style="color: black"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></span><br />We are requesting all customers ensure their passwords have a minimum length of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This applies across both user and API-based sessions.<br /><br /><span style="color: black"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></span><br />Please ensure that your access to eOriginal’s solution, whether through a browser or API, uses TLS 1.2 with a strong cipher suite (detailed in the attached document).</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Why.png" /></td>
<td style="width:70%;padding: 15px;">These actions provide greater protection from brute force attacks and keep the communication between eOriginal’s solution, your external systems, and user browser sessions secure.</td>
</tr>
</tbody>
</table> </td>
</tr>
<!-- <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone">
<td style="padding: 20px 40px 20px 40px; background-color:#EFF2F2">
<div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" style="" mktoname="heading-simple">
<div>
<br />
</div>
<p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></p>
<p>All customers will be required to comply with a minimum password policy of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This will be required across user and API-based sessions.</p>
<br />
<p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></p>
<p>Any access to eOriginal’s solution, whether through a browser or API, will be required to use TLS 1.2 with a strong cypher suite (detailed in the attached document).</p>
</div> </td>
</tr> -->
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" mktoname="content-intro-simple-clone-clone">
<td style="padding: 10px 40px 20px 40px">
<div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" style="" mktoname="heading-simple">
<p>Full details on these and other upcoming requirements can be found in the attached document. Should you have any questions or concerns, please feel free to contact our support team and they will route you to the most appropriate resource.</p>
<div>
We look forward to partnering with you on these important security initiatives.
</div>
<div></div>
<p>Thank you,</p>
<p><b>Val Daly</b> <br />VP, Customer Services<br />support#eoriginal.com</p>
</div> </td>
</tr>
<tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 12px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2019 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
Add below style to your css
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
Below is the screenshot of the output I get from the above css.
For more information on border for html table, check this link https://www.quackit.com/html/codes/tables/html_table_border.cfm
Below is the updated code
.table-bordered {
border-collapse: collapse;
}
.“table-bordered” tr, .“table-bordered” td {
border: 1px solid red;
border-collapse: collapse;
}
Related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title></title>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
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;
}
img {
display: block;
border-style: none;
line-height: 0px;
}
div,
p,
a,
li,
td,
th {
-webkit-text-size-adjust: none;
}
table {
display: table;
border-spacing: 0px;
padding: 0;
}
td {
border: 0;
padding: 0;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 294px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.mobile-show {
display: none !important;
font-size: 0 !important;
max-height: 0 !important;
line-height: 0 !important;
padding: 0 !important;
mso-hide: all !important;
/* hide elements in Outlook 2007-2013 */
}
.IconText {
font-size: 11px!important;
line-height: 13px!important;
}
input {
display: none !important;
}
input[id=effect]+div[class=em_show_g] {
display: block;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
#media only screen and (max-width:480px) {
.mobalign {
text-align: center !important;
}
.FullWidth {
width: 100%!important;
height: auto;
}
.mobile-hide {
display: none;
}
.mobile-show {
display: block !important;
margin: 0 !important;
overflow: visible !important;
visibility: visible !important;
width: auto !important;
max-height: inherit !important;
}
.mobile-brands {
width: 95% !important;
max-width: 95% !important;
}
.StackColumn {
display: block;
width: 100% !important;
text-align: center;
}
.OneFromTwo {
display: block;
width: 100% !important;
}
.CentreText {
text-align: center!important;
}
.CTA-Full {
width: 100% !important;
}
.SpacerHeight {
width: 1px;
height: 35px;
}
input[id=effect]+div[class=em_show_g] {
display: none;
}
input[id=effect]:checked+div[class=em_show_g] {
display: block !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
}
</style>
<!--[if mso]>
<style>
span, td, th, table, div, a {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
</head>
<body background="" bgcolor="#eceef3" style="">
<table cellpadding="0" cellspacing="0" style="border: 0px; padding: 0px; margin: 0px; position: absolute; display: none; float: left">
<tr>
<td height="1" style="font-size: 1px; line-height: 1px; padding: 0px;">
<!--Start BK pixel-->
<IMG SRC="" HEIGHT="1" WIDTH="1" /><br/><br/>
<!--End BK pixel-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!--<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family:Helvetica, Arial, sans-serif;">
<tr>
<td align="center">-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="content" style="margin:0 auto; table-layout:fixed; max-width:600px; width:100%; font-family: 'Lato', Helvetica, Arial, sans-serif; background:#ffffff; font-weight: 300;">
<!-- Preheader -->
<tbody>
<tr>
<td align="center" bgcolor="#FFFFFF" width="100%">
<div data-content-region-name="Pre_Header">
<!-- Preheader -->
<tr class="mobile-hide">
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; color:#1e1e1e; font-weight: 300; font-size:12px; line-height:18px; padding:20px;" width="100%">
</td>
</tr>
</table>
</td>
</tr>
<!-- Pre-Header End -->
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th align="center">
<table align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" style="background:#ffffff;" width="100%">
<tbody>
<tr>
<th align="left" style="padding-left: 20px; padding-bottom: 20px; padding-top: 20px;" width="50%">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="170">
<tbody>
<tr>
<th align="center" width="20">
<img alt="" border="0" height="20" src="" style="display: block; padding-right: 5px" width="16" />
</th>
<th align="center" style="width: 20px">
<img alt="" border="0" height="20" src="" style="display: block;" width="16" />
</th>
</tr>
</tbody>
</table>
</th>
<th align="right" style="padding-right: 20px" width="50%">
<table align="right" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="150">
<tbody>
<tr>
<th align="right" width="23">
<img alt="View in browser" border="0" class="mobile-hide" height="16" src="" style="display: block;" width="23" />
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
<!-- Header Image End -->
<!-- Header -->
<!-- Header Image End -->
<!-- Desktop Navigation -->
<!-- Desktop Navigation End -->
<!-- Content Starts Here -->
<tr>
<td width="100%" align="center">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<a href="#" target="_blank">
<img style="display:block;border:0;" src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
I've been trying to design an email template which has images. I use table structure to create the email with HTML and CSS. However, I see white lines between the images in different platforms. I don't have a problem in Gmail desktop, but I see white lines when opened in Gmail mobile app. How can this be fixed? I've also tried adding display: block; and font-size: 0px; but the issue still exists.
Try this code brother
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<meta property="og:title" content="{{My.Campaign-Meta-Title}}" />
<meta property="og:description" content="{{My.Campaign-Meta-Description}}" />
<meta property="og:image" content="{{My.Campaign-Meta-Image}}" />
<meta name="description" content="{{My.Campaign-Meta-Description}}" />
<meta name="keywords" content="{{My.Campaign-Meta-Keywords}}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="#eOriginal" />
<meta name="twitter:creator" content="#eOriginal" />
<meta name="twitter:title" content="{{My.Campaign-Meta-Title}}" />
<meta name="twitter:description" content="{{My.Campaign-Meta-Description}}" />
<meta name="twitter:image" content="{{My.Campaign-Meta-Image}}" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.no-spacing {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
#cover-img img {
max-width: 100%;
margin-bottom: 30px;
}
#cover-content ul {
padding-left: 15px;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
.pad-right-5 {
padding-right: 5px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-right-20 {
padding-right: 20px;
}
.pad-top-10 {
padding-top: 10px;
}
#content-middle a{
color: #0EABD6;
}
.inner {
padding: 10px 40px;
}
.two-column {
font-size: 0;
}
.two-column .rcolumn {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.mobile-center {
text-align: left !important;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.pad-right-20 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-center {
text-align: center !important;
}
.mobile-only {
display: block;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
table[class="body"] table.column td .list {
width: auto !important;
}
table[class="body"] img {
/*width: auto !important;*/
height: auto !important;
max-width: 100% !important;
}
table[class="body"] center {
min-width: 0 !important;
}
table[class="body"] .container {
width: 100% !important;
}
table[class="body"] .row {
width: 100% !important;
display: block !important;
}
table[class="body"] .wrapper {
display: block !important;
padding-right: 0 !important;
}
table[class="body"] .columns {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .column {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .wrapper.first .columns {
display: table !important;
}
table[class="body"] .wrapper.first .column {
display: table !important;
}
table[class="body"] table.columns td {
width: 100% !important;
}
table[class="body"] table.column td {
width: 100% !important;
}
table[class="body"] .columns td {
width: 100% !important;
display: block;
}
table[class="body"] .column td {
width: 100% !important;
display: block;
}
table[class="body"] td.offset-by-one {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-two {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-three {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-four {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-five {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-six {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-seven {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eight {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-nine {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-ten {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eleven {
padding-left: 0 !important;
}
table[class="body"] table.columns td.expander {
width: 1px !important;
}
table[class="body"] .right-text-pad {
padding-left: 10px !important;
}
table[class="body"] .text-pad-right {
padding-left: 10px !important;
}
table[class="body"] .left-text-pad {
padding-right: 10px !important;
}
table[class="body"] .text-pad-left {
padding-right: 10px !important;
}
table[class="body"] .hide-for-small {
display: none !important;
}
table[class="body"] .show-for-desktop {
display: none !important;
}
table[class="body"] .show-for-small {
display: inherit !important;
}
table[class="body"] .hide-for-desktop {
display: inherit !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; ">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; ">
<center style="width:100%; min-width:580px; ">
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" id="main-header" mktoname="main-header" style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<img src="http://info.eoriginal.com/rs/907-BBE-942/images/email header.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" />
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="intro-with-image" mktoname="intro-with-image" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left">
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="600" style="background-color:#ece9e2;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Season Greetings.jpg" alt="left" /></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="padding" mktoname="padding" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left">
<td style="padding: 10px 40px"> </td>
</tr>
<tr class="mktoModule" id="text-benefits" mktoname="text-benefits" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left">
<td style="padding: 0px 40px">
<table class="columns">
<tbody>
<tr valign="top">
<td>
<div class="mktEditable" id="cover-content" mktoname="cover-content">
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">{{lead.First Name:default=Hi}},</p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">It is our pleasure this holiday season to extend to you our warmest greetings and best wishes for a happy holiday and a prosperous new year.</p>
<p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/holidayphoto EDIT CROP.jpg" alt="left" width="500" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">Wishing you a season of joy and continued success into 2019.</p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">Sincerely,</p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">The eOriginal Team</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="bottom-cta" mktoname="bottom-cta" style="vertical-align:top; padding:0;">
<td style="padding: 0px 40px;" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center">
<div id="cta2" class="mktEditable" style="" mktoname="cta2">
<p class="no-spacing" style="font-family: Verdana, Arial;">Click Here</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="padding-sm" mktoname="padding-sm" style="vertical-align:top; padding:0;">
<td style="padding: 10px 40px;" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center"> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
As you can see from above code I'm getting the table with image inside, but the table seems to be a little big bigger at the bottom, causing it to have a thin grey bar. How can I make the image to fit the table or the table to fit the image? I have try height and it didn't seem to work. I have added height value to the image to fit table size and I have also try to add height value to fit image size, but it didn't seem to work.
The cause of the problem would be line-height:19px;
change the height and width of the image to 100%, this will fit the image inside the table div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
#-ms-viewport{ width: device-width;}
#media only screen and (max-width: 300PX) {
body[yahoo] .container { width:100% !important; }
body[yahoo] .footer { width:auto !important; margin-left:0; }
body[yahoo] .content-padding{ padding:4px !important; }
body[yahoo] .mobile-hidden { display:none !important; }
body[yahoo] .logo { display:block !important; padding:0 !important; }
body[yahoo] img { max-width:100% !important; height:auto !important; max-height:auto !important;}
body[yahoo] .header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
body[yahoo] .photo img { width:100% !important; max-width:100% !important; height:auto !important;}
body[yahoo] .drop { display:block !important; width: 100% !important; float:left; clear:both;}
body[yahoo] .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
body[yahoo] .nav4, body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important; }
body[yahoo] .tableBlock {width:100% !important;}
body[yahoo] .responsive-td {width:100% !important; float:left !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;}
h1 { font-size: 22px !important; line-height: normal !important;}
h2 { font-size: 20px !important; line-height: normal !important;}
h3 { font-size: 18px !important; line-height: normal !important;}
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
#media only screen and (max-width: 640px) {
body[yahoo] .container { width:100% !important; }
body[yahoo] .mobile-hidden { display:none !important; }
body[yahoo] .logo { display:block !important; padding:0 !important; }
body[yahoo] .photo img { width:100% !important; height:auto !important;}
body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style><!--[if mso]> <style type="text/css"> /* Begin Outlook Font Fix */ body, table, td { font-family: Arial, Helvetica, sans-serif ; font-size:16px; color:#808080; line-height:1; } /* End Outlook Font Fix */ </style> <![endif]--></head><body bgcolor="#ffffff" text="#000000" style="background-color: #FFFFFF; color: #000000; margin: 0px; padding: 0px; -webkit-text-size-adjust:none;" yahoo="fix"><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center" valign="top"><div style="margin:18px 0;">
<!-- END Table use to set width of email --></div>
<!--End Navi Bar-->
</td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding-top: 10px;padding-right: 10px;padding-left: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>
<img data-assetid="31498" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0dbebd2d-e383-4fb3-b7d2-775d5e3b437c.jpg" height="337" width="256" style="height:337px;width:256px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></table></td></tr></table></td>
<td class="responsive-td" valign="top" style="width: 50%; padding-left: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_eggo.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_motts.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_honey_nut_cheerios.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_progresso.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="168" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_metamucil.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_green_giant_beans.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 400px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Holderolay.jpg" alt="" width="120" height="120" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Mission.jpg" alt="" width="120" height="120" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/ReddyWhip.jpg" alt="" width="120" height="120" border="0" class=""></td>
<td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/images.jpg" alt="" width="120" height="120" border="0" class=""></td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Kraft.jpg" alt="" width="120" height="120" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0" class="pattern" width="100%"><tbody><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
2
</td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
3
</td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
2
</td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
3
</td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%; padding-left: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td><img data-assetid="31510" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/89c228aa-d401-4f79-ba4b-1f76b230b360.jpg" height="395" width="300" style="height:395px;width:300px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody>
</table></td></tr></tbody></table></td>
</tr></table></td></tr></table></td></tr><tr><td valign="top"><center><table cellpadding="2" cellspacing="0" width="600" ID="Table5"><tr><td> </body></html>
I just designed an email for a upcoming campaign however i'm having a tough time with it responding correctly to mobile devices. When I check it in Litmus it does not acknowledge any breakpoints pleaseeee help. I've attached the code below:
Three things stick out to me:
No. 1: You don't need brackets to define classes like this table[class="pattern"] anymore. table.pattern works in all email clients.
No. 2:
Why is almost everything prefixed with body[yahoo]? This targets Yahoo! Mail and won't be rendered anywhere else. If you have your media query code prefixed like this, it won't render in iOS Mail or Gmail App.
No. 3:
There are quite a few <style> tag blocks in the <body>. These won't be rendered by every email client, best to move them into the <head>.
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
I have the following structure:
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile" style="margin: 0 auto;">
<tbody>
<tr>
<td width="100%">
<!-- Space -->
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="30"></td>
</tr>
</tbody></table><!-- End Space -->
<!-- Icon 1 -->
<table width="115" height="100" border="0" cellpadding="0" cellspacing="0" style="float: left; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center; margin: 0 auto; border-right: 1px solid #d7d7d7; background-color: red;" class="fullCenter setFloatNone">
<tbody>
<tr>
<td valign="middle" width="100%" mc:edit="m28" class="fullCenter">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="fullCenter" >
<tbody>
<tr>
<td width="100%" height="100" style="text-align: center;">
<img src="images/icon1.png" width="35" alt="" border="0" mc:edit="m06"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Icon 1 Text -->
<table width="365" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; background-color: blue;" class="fullCenter">
<tbody>
<tr width="100%">
<td valign="middle" width="100%" height="100" mc:edit="m28" class="fullCenter">
<p style="font-weight: 700; font-size: 20px; color: #000000; font-family: 'Open Sans', Arial, sans-serif; line-height: 23px; margin-top: 0px; margin-bottom: 5px;" class="font20 centeredP">
<font face="'Open Sans', Arial, sans-serif">text</font>
</p>
<p style="font-size: 16px; color: #474747; font-family: 'Open Sans', Arial, sans-serif; line-height: 24px; margin-top: 0px; margin-bottom: 0px;" class="font16 centeredP">
<font face="'Open Sans', Arial, sans-serif">more text here</font>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Wrapper -->
<!-- Space -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody>
<tr>
<td width="100%" height="60"></td>
</tr>
</tbody>
</table><!-- End Space -->
<!-- END TEST -->
and my css:
<style type="text/css">
#media only screen and (max-width: 640px){
body{width:auto!important;}
td[class=showThreeRows] {padding-left: 80px !important; padding-right: 80px !important;}
table[class=full] {width: 100%; clear: both; }
table[class=mobile] {width: 100%; padding-left: 20px; padding-right: 20px; clear: both; }
table[class=fullCenter] {width: 100%; text-align: center !important; clear: both; }
td[class=fullCenter] {width: 100%; text-align: center !important; clear: both; }
td[class=fullCenter2] {width: 100%; text-align: center !important; clear: both; display: block; margin: 0 auto; }
td[class=fullCenter] p { width: 100%; text-align: center !important; clear: both; padding-left: 25px; padding-right: 25px; color: red;}
td[class=removePadding] { width: 100%; text-align: center !important; clear: both; padding: 0px !important; }
td[class=textCenter] {width: 100%; text-align: center !important; clear: both; }
table[class=headerScale] {width: 100%!important; text-align: center!important; clear: both; }
.headerScale img {width: 100%!important; height: auto;}
table[class=vidScale] {width: 100%!important; text-align: center!important; clear: both; }
.vidScale img {width: 100%!important; height: auto;}
.erase {display: none;}
table[class=screenLeft] {padding-right: 6px;}
table[class=screenRight] {padding-left: 6px;}
.font20 {font-size: 20px!important; line-height: 30px!important;}
table[class=w90] {width: 90%!important;}
table[class=icon] {width: 100%; text-align: center!important; clear: both; }
table[class=imageMobile] {width: 100%; clear: both;}
table[class=imageMobile] {width: 100%; clear: both;}
.imageMobile img {width: 80%!important; height:auto!important;}
.voucher1 {width: 100%!important; border-left: none!important; text-align: center!important;}
.fullOne {background-color: #efefef; height: 1px!important;}
.centeredP {text-align: center !important; color: red !important;}
<!--[if !IE]> -->
.font36 { font-size: 50px !important; line-height: 55px !important;}
.font30top { font-size: 66px !important; line-height: 69px !important;}
.font30 { font-size: 53px !important; line-height: 58px !important;}
.font20 { font-size: 40px !important; line-height: 45px !important; }
.font18 { font-size: 36px !important; line-height: 45px !important;}
.font16 { font-size: 27px !important; line-height: 34px !important;}
<!-- <![endif]-->
}
</style>
The issue is that the first table with the icon1.png renders all aligned to the left in my android (Nexus 4) instead of setting the table to 100% (like the 2nd table with the text) and aligning the icon to the middle.
Any ideas?
You have a css selector that selects table elements which have only the one class fullCenter an no other classes:
table[class=fullCenter] {
width: 100%;
text-align: center !important;
clear: both;
}
That is the reason why your <table ... class="fullCenter setFloatNone"> does not get selected. If you change your selector to
table.fullCenter {
width: 100%;
text-align: center !important;
clear: both;
}
you should be fine.