Write html email from nodejs - How to style the email?-CodePudding

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:

Email Screenshot

Any idea how I can change this code to get it working in a html email?

Edit: Things that doesn't work:

.topper doesn't get set to height: 80px
~~.image doesn't load the background image~~
~~The table and the p elements are not centered with margin: 0 auto;width: fit-content;~~
~~The p elements are not small and gray~~
The hr element 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

CodePudding user response：

The layout you want to render is to complex. these email clients cant handle it correctly.

Try to use a templating engine like EJS. You can find more info about it in this answer.

Hope you can fix your problem with this!

CodePudding user response：

For a fully supported background image in emails, the best resource is backgrounds.cm. This page created and maintained by Mailchimp for users to be able to add bullet proof backgrounds for all email clients.

First choose an option under 'Apply background image to' then fill in the details you need with the image path etc.

Also you might need a plugin to make your CSS inline or use an online inliner.

Below is your email where I have used Mailchimps CSS inliner.

A few additions I have done for look and feel to be consistent:

Added font family at td level and in footer paragraph tags.
Added width to the table.

<html>
    <head>
        
    </head>
    <body>
        <div class="topper" style="background-color: #003d8f;width: 100%;height: 80px;color: white;font-family: sans-serif;text-align: center;">
            <h1 style="padding-top: 20px;">Some Text Here</h1>
        </div>
        <br>
        <div class="content" style="margin: 0 auto;width: fit-content;">
            <div class="image" style="width: 293px;height: 80px;background-image: url(data:image/png;base64, data): ;background-size: contain;margin: 0 auto;"></div>
            <br>
            <br>
            <br>
            <table width="293" style="font-family: arial, sans-serif;border-collapse: collapse;">
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;"><b>DataDataDataDataDataData</b></td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">DataDataDataDataDataData</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">DataDataDataDataDataData</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Data</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">DataDataDataDataDataData</td>
                </tr>
                <tr>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">Table:</td>
                    <td style="font-family: arial, sans-serif;border-bottom-style: solid;border-color: #dddddd;border-bottom-width: 1px;text-align: left;padding-top: 13px;padding-right: 14px;">DataDataDataDataDataData</td>
                </tr>
            </table>
            <br>
            <br>
        </div>
        <br>
        <br>
        <br>
        <hr style="border-top: 1px solid #e2e1e1; border-left: 0px">
        <div class="footer content" style="margin: 0 auto;width: fit-content;">
            <p style="font-family: arial, sans-serif;width: fit-content;margin-left: auto;margin-right: auto;color: gray;font-size: small;">Here is a longer sentence. Here are a few information about the email.</p>
            <p style="font-family: arial, sans-serif;width: fit-content;margin-left: auto;margin-right: auto;color: gray;font-size: small;">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>