I have a nodejs program that sends out emails with nodemailer. At first, I just had a plain table with some data and minimal styling for border color etc. but now I want to add a bit more to the email.
I wrote some html code and looked into it via web browser and after I was done, I added the html code to the email text.
But after I sended myself a test email, I saw that the email is very different than what I saw in the web browser.
I have looked into it and saw that for example heigth is fully supported by html emails so I dont get why the styling is very off. The only thing I now can't work is 'background-image'.
Here is my html code:
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td {
border-bottom-style: solid;
border-color: #dddddd;
border-bottom-width: 1px;
text-align: left;
padding-top: 13px;
padding-right: 14px;
}
th {
padding: 8px;
}
.image {
width: 293px;
height: 80px;
background-image: url(data:image/png;base64, DATA);
background-size: contain;
margin: 0 auto;
}
.topper {
background-color: #003d8f;
width: 100%;
height: 80px;
color: white;
font-family: sans-serif;
text-align: center;
}
.topper h1 {
padding-top: 20px;
}
.content {
margin: 0 auto;
width: fit-content;
}
.footer p {
width: fit-content;
margin-left: auto;
margin-right: auto;
color: gray;
font-size: small;
}
</style>
</head>
<body>
<div class="topper">
<h1>Some Text Here</h1>
</div>
<br />
<div class="content">
<div class="image"></div>
<br />
<br />
<br />
<table>
<tr>
<td>Table:</td>
<td><b>DataDataDataDataDataData</b></td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
</table>
<br />
<br />
</div>
<br />
<br />
<br />
<hr/ style="border-top: 1px solid #e2e1e1; border-left: 0px">
<div class="footer content">
<p>Here is a longer sentence. Here are a few information about the email.</p>
<p>Here is a longer sentence. Here are a few information about the email. This sentence is even longer but it should be.</p>
</div>
</body>
</html>This is how the email looks like:
Any idea how I can change this code to get it working in a html email?
Edit: Things that doesn't work:
.topperdoesn't get set to height: 80px.imagedoesn't load the background imageThetableand thepelements are not centered withmargin: 0 auto;width: fit-content;Thepelements are not small and gray- The
hrelement looks wrong
Edit: I found a very helpful collection of supported and unsupported style rules for email clients: https://www.campaignmonitor.com/css/
Edit:
I changed .footer p { to just p{ and also font-size: small to font-size: 14px and now the bottom text has the right size and color.
Edit:
I gave table{, .image and p display: inline-block; and text-align: center; to .content{ and now they are centered
Edit:
Multiclasses like footer content also didn't work. Changing it to only content did make the p centered
Edit:
Removing background-image and background-size from .image{ and changing the div to img. Add as src this cid:logo and also add this code to nodemailer:
attachments: [{
filename: 'logo.png',
path: __dirname + "\\logo.png",
cid: "logo"
}]
let's you display images
