<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive email</title>
<style type="text/css">
body {margin: 10px 0; padding: 0 10px; background: #F9F2E7; font-size: 13px;}
table {border-collapse: collapse;}
td {font-family: arial, sans-serif; color: #333333;}
#media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="640" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" style="font-size: 0; line-height: 0; padding: 0 0;" height="140" align="center" class="responsive-image">
<img src="SplashScreen_WithRMBLogo_Font48_36_AgencyFB.png" width="660" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td style="padding: 10px 10px 20px 10px;">
<div style="font-size: 20px;">Hey guys,</div>
<br />
<div>
Here is the summary report
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="1" bgcolor="#F9F9F9"> </td></tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td>
<div style="max-height: 300px; max-width: 640px; width: 640px; overflow-x: auto; overflow-y: auto">
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Hello</div>
<div>
Hello moto 1111111111111111111111111111111111111111111111111
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Ask</div>
<div>
How are you moto 22222222222222222222222222222222222222222222222222222222
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Answer</div>
<div>
Cool thanks moto 33333333333333333333333333333333333333333333333333333
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td bgcolor="#A89C83">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
<tr>
<td style="padding: 0 10px; color: #FFFFFF;">
v1 Report
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Here is the code in jsfiddle: http://jsfiddle.net/nq3Re/124/
How do I get the three tables to be stacked horizontally? Currently they stack vertically.
The number of tables need not be just three, it could be N.
The solution to display HTML tables adjacent to each other without having them wrap but rather have a horizontal scroller come up.
CSS:
div.container {
display: inline-block;
}
HTML:
<div style="white-space:nowrap">
<div class="container">
<table border="2">
<tr>
<td>test 1 111111111111111111111111111111111111111</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 2 22222222222222222222222222222222222222</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 3 33333333333333333333333333333333333333333333</td>
</tr>
</table>
</div>
</div>
The important thing is to float the inner divs by using display: inline-block. The outer (or wrapper) div must have a white-space:nowrap
This is what the result looks like: https://jsfiddle.net/9k8ns73f/
Display them as inline-block:
<div class="container" style="display: inline-block"></div>
This can easily be done with floated divs:
CSS:
div.container {
float: left;
box-sizing: border-box;
text-align: center;
}
HTML
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
You can add whatever necessary css to .container... you can also add additional css classes to each individual div if needed.
Here is the Fiddle:
Related
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is about an email template with each table containing an item with a picture on the right side and the details on the left side with the name/brand name/ size and so on.
I have tried a bunch of different solutions I have found online but I can't get the structure to be responsive enough for all platforms.
Any resource regarding the structure is helpful. I made a picture to describe what the structure looks like.
Another user pointed out that I could show the last template I tried and a resource I used that didn't work out well.
https://codepen.io/Georgeslatina/pen/gOGzavj
<table role="presentation" cellpadding="0" cellspacing="0" width="580" style="margin: auto;height: 220px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 20px;margin-bottom:28px !important;direction:ltr !important">
<tbody>
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;"> :סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="25%" style="position: relative">
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
And the conditional VML in the example down did not work in my tests.
https://stackoverflow.design/email/templates/short-transactional/
Here is a hybrid method of achieving what you have in your image. My code is not dependent on media queries but I have added a class in to make my blocks 100% width in mobile. If that is removed, the row with text3, text2 and text1 will start stacking on their own as it reaches smaller screen size.
I have not put in any pipes/seperators as they can be placed when you add your content in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Untitled Document</title>
<style type="text/css">
/*not smart phones*/
#media only screen and (max-width:480px) {
.fullWidth{width:100% !important;max-width:100% !important;}
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<!-- start 700 pixel container -->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="fullWidth" style="max-width:700px;">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text3</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;"></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">image</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- start 700 pixel container -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</table>
</body>
</html>
Dont set your layout in a single table, seperate them into two tables. Table for content and table for image.
<style>
#media screen and (max-width: 600px) {
.module-wrapper, .grid{
width: 100% !important;
}
.grid{
float: none !important;
}
}
</style>
<table class="module-wrapper" cellpadding="0" cellspacing="0" border="0" width="580" align="center">
<tr>
<td>
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%" dir="rtl"><tr><td valign="top" dir="ltr"><![endif]-->
<table class="grid" cellpadding="0" cellspacing="0" border="0" width="135" align="right">
<tr>
<td align="center" style="position: relative">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- #end image table -->
<!--[if mso]></td><td valign="top" dir="ltr"><![endif]-->
<table class="grid" role="presentation" cellpadding="0" cellspacing="0" width="445" align="left">
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span
style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;">
:סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table><!-- #end content table -->
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table><!-- #end module-wrapper -->
Then use media query to make your table responsive
If you dont want to use media query try using the method from this article
https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
I tried to use CSS grid for this
#parent-container {
border: 0.2rem solid black;
padding: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-content: center;
}
#parent-container img {
width: 100%;
height: auto;
border-radius: 0.3rem;
}
.first-container {
height: 100%;
display: grid;
grid-auto-rows: 1fr;
}
.first-container div:nth-child(1) {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.first-container div:nth-child(2) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div:nth-child(3) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div>div:not(:last-child) {
border-right: 0.2rem solid black;
}
.first-container div {
display: grid;
gap: 0.5rem;
}
.second-container {
display: grid;
place-items: center;
border: 0.2rem solid black;
padding: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="parent-container">
<!-- first container-child -->
<div class="first-container">
<div>
<div>text1</div>
<div>text2</div>
</div>
<div>
<div>text3</div>
<div>text2</div>
<div>text1</div>
</div>
<div>
<div></div>
<div>text2</div>
<div>text1</div>
</div>
</div>
<!-- second container-child -->
<div class="second-container">
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<div>text</div>
</div>
</div>
</body>
</html>
I am setting up HTML template with 600 px as parent body width, but in outlook 2007 - 2019, full available width is being occupied.
Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.
Expected Image:
Error Image:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>test</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial; font-size: 13px"
>
<tr bgcolor="#eeeeee">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="box-shadow: 0px 0px 4px 2px #e0e0e0"
>
<tr bgcolor="#ffffff">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
class="email_content"
style="
padding-bottom: 15px;
background-color: #fafafa;
"
>
<div
style="
padding: 5px;
border-radius: 4px 4px 0px 0px;
background-color: #fdaf74;
"
></div>
<!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
<!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
<img style="padding : 20px 0 0 25px;"
src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
height="40">
</td>
</tr>
<tr>
<table style="margin: 0 7px">
<table
align="center"
width="100%"
class="main-wrapper"
style="border-bottom: 1px solid #eee"
>
<tr>
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial"
>
<tr bgcolor="#F2F2F2">
<td align="center">
<table
cellpadding="0"
cellspacing="0"
width="600"
border="0"
>
<tr>
<td>
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr bgcolor="#ffffff">
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
style="
text-align: left;
font-size: 16px;
padding: 6px 0
10px 18px;
"
>
<p
style="
color: #1a1a1a;
"
>
Hi Sheetal
Chourasiya,
</p>
<p
style="
color: #505050;
"
>
You have
received Plum
E-Gift Card.
Congratulations!
</p>
</td>
</tr>
<tr>
<td
align="center"
>
<img
src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
style="
margin: 0;
border: 0;
padding: 0;
display: block;
"
width="600px"
height="300px"
alt="Image"
/>
</td>
</tr>
<tr>
<td
style="
padding: 24px
60px 0;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="
text-align: left;
font-size: 14px;
background-color: #fafafa;
border-radius: 6px;
margin-bottom: 30px;
"
>
<tr>
<th
style="
padding: 24px
0 10px
24px;
text-align: left;
font-size: 16px;
color: #505050;
"
>
Plum
E-Gift
Card
</th>
<td
style="
text-align: right;
padding-right: 20x;
"
>
<a
href="https://docs.xoxoday.com/docs/getting-started-1"
target="_blank"
style="
color: #c7417b;
text-decoration: none;
display: none;
"
>What is
Plum?</a
>
</td>
</tr>
<tr
style="
box-shadow: 0px -1px
0 0 #eaeaea;
"
>
<td
style="
padding: 20px
0 20px
24px;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
>
<tr>
<td>
<span
style="
color: #909090;
font-size: 16px;
margin: 0;
"
>Gift
Card
Code</span
>
</td>
</tr>
<tr>
<td>
<span
style="
color: #505050;
font-size: 20px;
margin: 6px
0
0
0;
font-weight: 500;
letter-spacing: 0.025rem;
"
>77m43dddb46b</span
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Change this line:
<table align="center" style="width: 100%" class="main-wrapper">
To:
<table align="center" style="width: >100%" class="main-wrapper">
(>100% is a number smaller than 100, for example 90)
The initial width of a block-level element like div or p is auto.
Use [ width: auto ] to undo explicitly specified widths.
if you specify [ width:100% ], the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.
width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regard to the parent. This typically causes problems.
Check the image link below to get more information.
HTML Width - by Shashank
You have px value on your image of the birthday code it seems. I have removed it and updated your code slightly through and online cleaner. I am a dreamweaver user and your code was not working for me. If the below code has issues, just change the width value of your birthday image (belated-happy-birthday-3.jpg) and assign width value without the pixels.
Try out this code to see if it works for you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial; font-size: 13px">
<tr bgcolor="#EEEEEE">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="box-shadow: 0px 0px 4px 2px #e0e0e0">
<tr bgcolor="#FFFFFF">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="email_content" style="padding-bottom: 15px; background-color: #fafafa;">
<div style="padding: 5px; border-radius: 4px 4px 0px 0px; background-color: #fdaf74;"></div><!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> --><!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> --><img src="https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg" alt="First_American_Logo_0" width="142" height="40" style="padding : 20px 0 0 25px;">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial">
<tr bgcolor="#F2F2F2">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="text-align: left; font-size: 16px; padding: 6px 0 10px 18px;">
<p style="color: #1a1a1a;">Hi Sheetal Chourasiya,</p>
<p style="color: #505050;">You have received Plum E-Gift Card. Congratulations!</p>
</td>
</tr>
<tr>
<td align="center"><img src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="300" alt="Image"></td>
</tr>
<tr>
<td style="padding: 24px 60px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="text-align: left; font-size: 14px; background-color: #fafafa; border-radius: 6px; margin-bottom: 30px;">
<tr>
<th style="padding: 24px 0 10px 24px; text-align: left; font-size: 16px; color: #505050;">Plum E-Gift Card</th>
<td style="text-align: right; padding-right: 20x;">
What is Plum?
</td>
</tr>
<tr style="box-shadow: 0px -1px 0 0 #eaeaea;">
<td style="padding: 20px 0 20px 24px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><span style="color: #909090; font-size: 16px; margin: 0;">Gift Card Code</span></td>
</tr>
<tr>
<td><span style="color: #505050; font-size: 20px; margin: 6px 0 0 0; font-weight: 500; letter-spacing: 0.025rem;">77m43dddb46b</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The problem is in the following line:
<table align="center" style="width: 100%" class="main-wrapper">
When you use style = "width: 100%", you are saying that you want the width of the table to be the entire browser width; the width of the parent container and the margins combined.
There are a few ways you can fix this problem:
The first way is to use width: auto:
<table align="center" style="width: auto" class="main-wrapper">
Another way it to just set the pixels manually:
<table align="center" style="width: 600px" class="main-wrapper">
Or, you can just get rid of the style as a whole so it'll auto fit to the parent width:
<table align="center" class="main-wrapper">
All three of these methods will produce the same result.
I have a problem.
I'm using Node.JS nodemailer.
const url = `${url}`;
var mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: 'Please click this email to confirm your email: ${url}`'
};
The HTML is quite long. So I would have to link each line with
'Line1' +
'Line2' +
and unfortunately the uplines are shown an error see: align = 'center'
Is there a way to embed this HTML file simply and easily?
And if I can include the file separately I have created a variable and this should then be displayed in HTML. How would that work?
Can I somehow embed the file differently than directly in the code? I appreciate help!
This is my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[SUBJECT]</title>
<style type="text/css">
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.tableContent img {
border: 0 !important;
display: block !important;
outline: none !important;
}
a{
color:#382F2E;
}
p, h1{
color:#382F2E;
margin:0;
}
p{
text-align:left;
color:#999999;
font-size:14px;
font-weight:normal;
line-height:19px;
}
a.link1{
color:#382F2E;
}
a.link2{
font-size:16px;
text-decoration:none;
color:#ffffff;
}
h2{
text-align:left;
color:#222222;
font-size:19px;
font-weight:normal;
}
div,p,ul,h1{
margin:0;
}
.bgBody{
background: #ffffff;
}
.bgItem{
background: #ffffff;
}
#media only screen and (max-width:480px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
td[class="left_pad"]
{
padding-left:15px !important;
padding-right:15px !important;
}
}
#media only screen and (max-width:540px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
.font {
font-size:18px !important;
line-height:22px !important;
}
.font1 {
font-size:18px !important;
line-height:22px !important;
}
}
</style>
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ffffff",
"link":"382F2E",
"color":"999999",
"bgItem":"ffffff",
"title":"222222"
}
</script>
</head>
<body paddingwidth="0" paddingheight="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
<table bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent" align="center" style='font-family:Helvetica, Arial,serif;'>
<tbody>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="MainContainer">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="40"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- =============================== Header ====================================== -->
<tr>
<td height='75' class="spechide"></td>
<!-- =============================== Body ====================================== -->
</tr>
<tr>
<td class='movableContentContainer ' valign='top'>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" align="center" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#222222;'><span class="specbundle2"><span class="font1">Welcome to </span></span></p>
</div>
</div></td>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#DC2828;'><span class="font">[CLIENTS.COMPANY_NAME]</span> </p>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign='top' align='center'>
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img src="images/line.png" width='251' height='43' alt='' data-default="placeholder" data-max-width="560">
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height='55'></td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<h2 >Will this be your welcome email?</h2>
</div>
</div>
</td>
</tr>
<tr><td height='15'> </td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p >
Here’s what you can say: Thanks again for signing up to the newsletter! You’re all set up, and will be getting the emails once per week. Meanwhile, you can check out our <a target='_blank' href='#' class='link1' >Getting Started</a> section to get the most out of your new account.
<br>
<br>
Have questions? Get in touch with us via Facebook or Twitter, or email our support team.
<br>
<br>
Cheers,
<br>
<span style='color:#222222;'>Peter Parker</span>
</p>
</div>
</div>
</td>
</tr>
<tr><td height='55'></td></tr>
<tr>
<td align='center'>
<table>
<tr>
<td align='center' bgcolor='#1A54BA' style='background:#DC2828; padding:15px 18px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<a target='_blank' href='#' class='link2' style='color:#ffffff;'>Activate your Account</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height='20'></td></tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height='65'>
</tr>
<tr>
<td style='border-bottom:1px solid #DDDDDD;'></td>
</tr>
<tr><td height='25'></td></tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p style='text-align:left;color:#CCCCCC;font-size:12px;font-weight:normal;line-height:20px;'>
<span style='font-weight:bold;'>[CLIENTS.COMPANY_NAME]</span>
<br>
[CLIENTS.ADDRESS]
<br>
<a target='_blank' href="[FORWARD]">Forward to a friend</a><br>
<a target="_blank" class='link1' class='color:#382F2E;' href="[UNSUBSCRIBE]">Unsubscribe</a>
<br>
<a target='_blank' class='link1' class='color:#382F2E;' href="[SHOWEMAIL]">Show this email in your browser</a>
</p>
</div>
</div></td>
<td valign="top" width="30" class="specbundle"> </td>
<td valign="top" class="specbundle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign='top' width='52'>
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/facebook.png" width='52' height='53' alt='facebook icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
<td valign="top" width="16"> </td>
<td valign='top' width='52'>
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/twitter.png" width='52' height='53' alt='twitter icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td height='88'></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="40"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You could simply keep your template-html in a file and use an arbitrary js-templating library (e.g. ejs) to parse the template data and render its html. Something like this should help you get started:
In your app.js do the following:
const fs = require('fs');
const eis = require('ejs');
const template = fs.readFileSync("/path/to/your/template.ejs");
const templateData = { url: `${url}`, otherDataYouNeedToSetInTemplate: "here" };
const renderedHtml = ejs.render(template, templateData};
const mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: renderedHtml
};
Then in your template.ejs you can access the properties from templateData and set its values in the html:
<!DOCTYPE html>
<html>
....
Please click this email to confirm your email: <%= url %>`
....
</html>
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.