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>
Related
The following code has several issues when sending all Html5 newsletters I coded.
I received footer code from the client, but it seems that it doesn't work more.
Remaining parts of the newsletters works well.
I copied an empty template mail I usually use to code my htmls.
<!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.0">
<title>xxxxxx/title>
<style>
ul {
list-style-position: inside;
padding-left: 0;
}
a {
color: inherit !important;
text-decoration: none !important;
}
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;
}
.content {
width: 100%;
max-width: 600px; !important
}
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
table, td { border-collapse:collapse; }
.hyphenate {
/* Careful, this breaks the word wherever it is without a hyphen */
overflow-wrap: break-word;
word-wrap: break-word;
/* Adds a hyphen where the word breaks */
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*remove blue links for iOS*/
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;}
#media only screen and (max-width: 480px) {
/* MUESTRA ENLACE EN MOVIL */
.bloque{width: 100%; display: block!important; height: 40px!important; vertical-align: middle!important}
.bloque2{width: 100%; display: block!important; vertical-align: middle!important}
.bloque2 table{width: 100% !important;}
table.body {float:left;width:100% !important;padding:0;font-size:13px !important}
.ancho{width:100% !important}
.ancho2{width:100% !important;text-align:center !important}
.ancho3{width:33% !important;margin-bottom:12px !important}
.ancho3_2{width:25% !important;margin-bottom:12px !important}
.anchotlfn{width:26% !important;margin-bottom:12px !important}
.ancho4{width:98% !important}
.anchon{width:50% !important}
.separa{ padding:8px 0 !important}
.iber{margin:20px 0 0 25% !important}
.logo{width:40% !important}
.logo2{width:76% !important}
td.izqui{text-align:left !important}
.verde{width:100% !important;font-size:14px !important}
.gg{width:100% !important;font-size:18px !important}
.verde2{width:100% !important;font-size:13px !important}
.oculto{display:none !important}
.pie{line-height:auto !important;font-size:11px !important}
.pdtop{padding-top:10px!important}
.pdbot{padding-bottom:10px!important}
.pe{width:80% !important;padding-top:3px !important}
.alto{ height:10px !important;}
.centrado{text-align:center !important; padding:5px 0 20px 0 !important;}
.nopad{padding-left: 0px !important}
.izq{text-align:left !important; float:left !important}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000511">
<!--[if mso]>
<table width="600" border="0" align="center" margin bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table class="content" width="100%" border="0" align="center" bgcolor="#5c881a" cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td bgcolor="#FFFFFF"><table width="550" border="0" cellspacing="0" cellpadding="0" class="ancho">
<tr>
<td width="24"> </td>
<td width="502"><table width="75%" border="0" cellspacing="0" cellpadding="0" class="ancho" align="left">
<tr>
<td> </td>
</tr>
<tr>
<td style="color:#262626;font-size:12px;font-family:Arial,Helvetica,sans-serif">Se non riesci a visualizzare correttamente il messaggio, clicca qui</td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15" class="ancho">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/xxx.jpg" width="100%" border="0" alt="a"></td>
</tr>
<tr>
<td><img src="img/bordo-top.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="45">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" style="color:#5c881a;font-size:16px;font-family:Arial,Helvetica,sans-serif; line-height: 23px; text-align: justify;">test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/bordo.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td>
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#5d881a">
<td width="160" height="60" valign="middle" bgcolor="#5d881a" class="bloque pdtop"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/tel.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
xxx xxx xxx</td>
</tr>
</tbody>
</table>
</td>
<td width="140" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:140px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/sito.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a href="" target="_blank"
style="color: #ffffff; text-decoration: none">xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="255" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:255px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif" >
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/mail.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a style="color: #ffffff; text-decoration: none"
href="mailto:servizioclienti#iberdrola.it">servizioclienti#xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td height="60" width="110" valign="middle" bgcolor="#5d881a" class="bloque pdbot"
style="text-align: left; width:110px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46"><a href="https://www.facebook.com/xxxxxxxxx/"
target="_blank"><img src="img/fb.gif" border="0"></a></td>
<td width="46"><a href="https://twitter.com/xxxxxxxxx" target="_blank"><img
src="img/tw.gif" border="0"></a></td>
<td><a href="https://www.instagram.com/xxxxxxxxx/" target="_blank"><img
src="img/ig.gif" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td><img src="img/line.gif" width="100%"></td></tr>
<tr><td style="text-align: left; color:#ffffff;font-size:14px;font-family:Arial,Helvetica,sans-serif"><br><br>XXXXX</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<tr>
</table>
<![endif]-->
</body>
</html>
expected mobile visualization screenshot
actual visualization when the mail is sent
Desktop visualization
I got problem with my email signature. It's not quite responsive. Responsive just for window resize but not for tool's developer chrome
here's files from dropbox
www.dropbox.com/sh/z09rlwphzdbzq5c/AABZu1NZCPZ_EEFOUzeAX3JZa?dl=0
.background{
background: url("https://image.ibb.co/cse3Jb/bg_car.png") center no-repeat;
}
div[class="wide-version-of-table"] { display:block; }
div[class="narrow-version-of-table"] { display:none; }
body { padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none }
#media only screen and (max-device-width: 500px), only screen and (max-width:500px) /* The maximum width for the mobile device version. */
{
div[class="wide-version-of-table"] { display:none; }
div[class="narrow-version-of-table"] { display:block; }
span[class='content-width-img'] img { width: 100% !important; height: auto !important; max-width: 480px !important; }
}
#media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {
table[class='w320'] {
width: 100% !important;
}
th[class='column'] { float: left !important; width: 100% !important; display: block !important; }
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>CarSPA Email</title>
</head>
<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none">
<div class="wide-version-of-table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th valign="top" align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<th>
<div >
<table cellpadding="0" cellspacing="0" border="0" style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%">
<tr>
<td class="column">
<img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
</td>
<td class="column" width="90%" valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;">
<p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">
Karol Nowak<br/>
<span style="font-weight: normal;">właściciel</span></p>
<p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">cars warsaw</span><br/>
tel.kom. +48 555 555 555<br/>
email: emailadres<br/>
</p>
<p style="padding-top: 12px;font-size:15px;">
ul. Frontzka 2<br/>
77-577 Poland
</p>
</td>
<td class="column"align="right" style="position: relative; padding-right: 5px;">
<!--<img src="bg-car.png" alt="CarSpa - email"/>-->
<span><img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;margin-top: 25px;"/>
</span>
<span><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" style=""/>
</span>
<span><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/>
</span>
<span><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Youtube" style="padding-right: 0px"/>
</span>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</th>
</tr>
</table>
</div>
<div class="narrow-version-of-table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th valign="top" align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<th>
<div >
<table cellpadding="0" cellspacing="0" border="0" style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%">
<tr>
<td class="column">
<img src="zdjecie-01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
</td>
<td class="column" width="90%" valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;">
<p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">
Piotr Zawisza<br/>
<span style="font-weight: normal;">właściciel</span></p>
<p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">CarSPA Gdynia</span><br/>
tel.kom. +48 505 505 999<br/>
email: piotr.zawisza#car-spa.pl<br/>
</p>
<p style="padding-top: 12px;font-size:15px;">
ul. Stryjska 11<br/>
81-507 Gdynia
</p>
</td>
</tr>
<tr>
<td class="column"align="right" style="position: relative;">
<!--<img src="bg-car.png" alt="CarSpa - email"/>-->
<span style="margin-left: 100%;">
<a href=""><img src="carspa-logo.png" alt="CarSpa - Logo" style="margin-bottom: 13px;margin-top: 25px;"/>
</a>
<span style="margin-left: 100%">
<img src="icon-fb.png" alt="CarSpa - Facebook" style=""/>
<img src="icon-ig.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/>
<img src="icon-yt.png" alt="CarSpa - Youtube" style="padding-right: 0px"/>
</span>
</span>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</th>
</tr>
</table>
</div>
</body>
</html>
https://codepen.io/zaraki12345/pen/RxOoZe
#media screen and (max-width: 768px), screen and (max-device-width: 768px) {
table[class="responsive_table"] {
width:100% !important;
}
table[class="responsive_table"] td {
height: auto !important;
}
table[id="emailContainer"] {
max-width: 600px !important;
width: 95% !important;
}
}
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="650" id="emailContainer">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%" class="emasilBody">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
<tr>
<td align="center">
<img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
<tr>
<td align="center">
<p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">Karol Nowak<br/><span style="font-weight:normal;">właściciel</span></p>
<p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">cars warsaw</span><br/>tel.kom. +48 555 555 555<br/> email: emailadres</p>
<p style="padding-top: 12px;font-size:15px;">ul. Frontzka 2<br/>77-577 Poland</p>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
<tr>
<td align="center">
<p style="margin-top:0;"><img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;"/>
</p>
<p><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" /><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
This question already has an answer here:
How to avoid White line between img and td bottom?
(1 answer)
Closed 6 years ago.
Here is the code:
Fiddle
I believe I have removed all spacing, but the td is still 305px and the img is 300px height.
Even if I try:
<td height="300">
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
or
<tr height="300">
On the containing <tr>.
This is completely ignored and the td stays at 305px?
because img is an inline element and has vertical-align:baseline therefore creates a gap.
So you either can:
display:block in img
or set
vertical-align:bottom
Also you don't need 2 styles tag, neither don't you need to duplicate the body rule with new properties, just put all in one body rule.
Note: careful if you are creating this for html-email, the CSS which is not inline (above body) some email clients such as gmail will strip it, make sure you put it all inline or you use some toll that will do that for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battersea Studios</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
font-family: Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
border: 0;
display: block
}
a {
border: 0;
}
hr {
width: 20px;
text-align: left
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="color:white;">
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#E66977;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>urtyryhry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
ryhryhjtyhjty
<br>tyjtyjtyjty
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#1EA553;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>F</strong>
</td>
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
rthrthrth
<br>ryhryhryht
<br>hryhryhryt
</td>
</tr>
</table>
</td>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
</tr>
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#EA752E;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>rtyryry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
rryu56u
<br>ryuryuy
<br>uryuryuyrt
<br>ytyutyuty
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
img is inline element and it takes few extra pixels on bottom by default. Use display: block for img to remove this space:
table img {
display: block;
}
<!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:
I'm designing an email campaign template for a client and running into an issue. Trying to set my mobile styles to font-size:100% important!; but there seems to be a sizing issue here. The only things affected are #requiredFooterText td, leadline td, #full td, and #paragraphText. It simply doesn't resize for mobile and I need it to 14px. Picture 1 is what I have and Picture 2 is what I want.
Picture 1 -
Picture 2 -
I've tried to force the the font-size out of percentages as well to 24 px instead of 14px. However, it cuts out mobile hero and footer image in the process.
Hopefully I've explained myself well enough. Code is below:
<!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></title>
<style data="noinline">
.appleLink a,
.appleLink {
color:#777777 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#777777 !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important;
table-layout:fixed !important;
}
body {
margin:0; !important
padding:0; !important
}
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroMobile],
table[id=messageWrapper],
table[id=footerMobile]
div[id=logo] {
margin:0 auto !important;
width:100% !important;
}
table[id=heroMobile] img
table[id=footerMobile] img {
display: block !important;
height:auto !important;
width:100% !important;
}
td[id=requiredFooterText]
td[id=leadline]
div[id=paragraphText] {
font-size:100% !important;
}
td[id=full] {
display:block;
width:100%;
font-size:100% !important;
}
img[class=icon] {
width:180px;
height:160px;
margin-bottom:20px;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink {
color:#555555 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#555555 !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display: none !important;
max-height: 0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#paragraphText {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#mainWrapper {
background: #dadada;
}
#main {
background: #ffffff;
}
#leadlineWrapper {
background: #333333;
}
#leadline {
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.25;
padding-bottom: 14px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#messageBody {
padding:20px;
}
#messageBody a {
color: #d46128;
}
#bulletlist td {
vertical-align:top;
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#logo {
background-color:#333333;
margin: 0 auto;
width:600px;
padding-top:20px;
padding-bottom:20px;
}
#requiredFooterText {
color: #555555;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
margin:0;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;" bgcolor="#dadada">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table id="headerWrapper" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table id="leadlineWrapper" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="ec_item" id="leadline">Get a premier education on Florida's Gulf Coast.</td>
</tr>
</table><!-- /#leadlineWrapper -->
</td>
</tr>
</table><!-- /#headerWrapper -->
<table id="main" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td class="ec_item" id="heroWrapper">
<table class="mobileHide" id="heroDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="419" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#heroDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="heroMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="226" border="0" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table><!-- /#heroMobile -->
</div>
</td>
</tr><!-- /hero -->
<tr>
<td id="messageContainer">
<table id="messageWrapper" width="590" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="text-transform: none;" id="messageBody">
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
{First_name},<br /><br />
When you step onto the <strong>Blank</strong> campus, you know you've arrived somewhere special. In fact, we're one of only 40 schools featured in the book <em>Colleges That Change Lives</em>.
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
</div>
<table dir="rtl" id="bulletlist" width="100%">
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>188 acres of waterfront campus</strong> give you unlimited access to the living laboratory of the Gulf of Mexico. We offer an exhilarating academic experience and constantly strive toward inspiring you to THINK<strong>OUT</strong>SIDE.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet1 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>40 majors and 45 minors</strong> allow you to pursue a range of interests. You can even self-design your own major.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet2 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>96 percent of students</strong> receive some sort of financial aid, and individual merit scholarships of up to $19,000 are available.</p>
</td>
<td width="1%" dir="ltr" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet3 -->
<tr>
<td width="100%" height="15" class="ec_item"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>Autumn Term</strong> is an immersive three-week experience led by an expert faculty mentor. Opening with the Ceremony of Lights, your first academic course is a special opportunity to transition to college-level learning while becoming a strong member of the community.</p>
</td>
<td width="1%" id="full" class="ec_item"><img src="" /></td>
<td width="1%" dir="ltr" class="ec_item" id="full">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet4 -->
</table>
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
<strong><u>Confirm your information</u></strong> to find out more ways encourages you to THINK<strong>OUT</strong>SIDE.
</div>
<div width="100%" height="15"><img src="" /></div>
</td><!-- /#messageBody -->
</tr>
</table><!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td class="ec_item" id="footerContainer">
<table class="mobileHide" id="footerDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="155" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="footerMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="144" border="0" style="color: #9c3022; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerMobile -->
</div>
</td>
</tr>
<tr>
<td>
<div class="ec_item" id="logo" align="center">
<a href="">
<img height="49" width="160" style="margin:20px;" src="" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;" alt="" /></a>
</div>
</td>
</tr>
</tbody>
</table><!-- /#main -->
<table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="requiredFooterText">
This message was sent to <span style="color:#333333;">{EMAIL}</span> by <span style="color:#333333;">{FROM_EMAIL}</span>.<br /><br />
=
We received your contact information from {CONTACT_SOURCE}.<br /><span style="color:#333333;">Unsubscribe</span> from future email communications from Office of Admission.<br /><br /><br />
</td>
</tr>
</table><!-- /#requiredFooter -->
</td>
</tr>
</table><!-- /#mainWrapper -->
</body>
</html>
What about css media queries?
As a reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can not have 2 style in your header.
When it is to an email template, I would advise you to make everything inline style and the things that need to be different on the phone must be in header #media, with a !important on. as shown in the example.
Hope it helps
<!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></title>
<style>
#media only screen and (max-width: 480px) {
.paragraphText p {
font-size: 24px !important;
}
}
</style>
</head>
<body>
<div class="paragraphText">
<p style="color: #000000; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5;"> Confirm your information</p>
</div>
</body>
</html>