css for HTML Email content not getting applied in gmail

Question

I am trying to prepare mark up for an HTML email content. I have a table as shown below. The styles for the table are not getting applied when viewed in gmail(mobile and web) applications. Also the styles for this table are not getting applied when tested in apple mail. Can anyone please help.

https://jsfiddle.net/Anifa/puyddvmy/

<table cellspacing="0" cellpadding="0" border="0" width="100%" id="txn-info-container" style="padding: 0px 0px 0px 0px">
    <tr>
        <td width="25">
        </td>
        <td width="550">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>label</td>
                        <td>Value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td width="25">
        </td>
    </tr>
</table>

#txn-info-container table {
    max-width: 550px;
    width: 100%;
    background-color: #F7F6F6;
    border-top: 1px solid #dfdddc;
}
#txn-info-container table td {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #dfdddc;
    font-family: 'Roboto', 'Arial', 'Helvetica';
    font-size: 12px;
    /* text-indent: 10px; */
    Margin-left: 10px;
    padding-left: 10px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #txn-info-container table  {
    Margin-left: 0px!important;
    }
}

Note : I am writing all the css in style tag and inlining it programatically using inline-css node module package. All the head and style tags gets removed and only the inlined css styles apply

Can you explain what are you trying to achieve? Gmail tends to strip out much of styling properties for security and accessibility reasons. — James Wong, Apr 23 '18 at 07:36
Apply inline css for gmail (email) templates... Like this... https://stackoverflow.com/questions/49556424/images-not-loading-properly-in-gmail-using-html-template-on-samsung-galaxy-note — Sarvan Kumar, Apr 23 '18 at 07:36
@SarvanKumar Am indeed inlining the css programatically using inline-css node package — An User, Apr 23 '18 at 07:41
@SarvanKumar Here is my full html code - https://codeshare.io/aypp10 — An User, Apr 23 '18 at 07:49
@JamesWong Am trying to read a table from the ck-editor, display it within the txn-info-container, add styles to it through css. This is working in all email clients except gmail and for apple mail — An User, Apr 23 '18 at 07:51
@SarvanKumar JS Fiddle link - https://jsfiddle.net/Anifa/puyddvmy/ — An User, Apr 23 '18 at 08:00
@SarvanKumar Please let me know if you figured out something — An User, Apr 23 '18 at 09:11
@AnUser, Please check my answer, its working fine in my end... — Sarvan Kumar, Apr 23 '18 at 10:06

score 4 · Answer 1 · answered Apr 23 '18 at 08:04

4

You cant use style by id or class inside the email, if you want to style your email you must set the style inside tags.

For simple example:

<a style="color:white;background:black;padding:20px;">This Link</a>

and do not forget to set Content-type:text/html;charset=UTF-8 on your header.

answered Apr 23 '18 at 08:04

Irvan

384
2
12

That was what I was doing. I am writing all the css in style tag and inlining it programatically using inline-css node module package. All the head and style tags gets removed and only the inlined css styles apply – An User Apr 23 '18 at 08:59
Can you just use manually tag style without inline-CSS node module package? because I also have tried various ways to make my email style is not on all tags but all unreadable and one of his way just by putting in the tag – Irvan Apr 23 '18 at 09:13

score 1 · Accepted Answer · answered Apr 23 '18 at 10:05

1

You can use inline styles like this...

https://codeshare.io/GAEng8

<table width="100%" cellpadding="0" cellspacing="0" id="dummy" bgcolor="#F7F6F6" style="border: 1px solid #dfdddc;border-collapse: collapse;border-left:0;border-right:0;">
  <tr>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Label</td>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Value</td>
  </tr>
  <tr>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>
  </tr>
  <tr>
    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>
    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>
  </tr>
</table>

Its working in gmail as well...

answered Apr 23 '18 at 10:05

Sarvan Kumar

926
1
11
27

Yes this worked. Thank you.But This particular table comes from a ck-editor where client enters his data. I cannot tell customer to add this code when they try to enter the data. Is there a backend way to achieve this, instead of front-end i.e adding in the html style attribute? – An User Apr 23 '18 at 10:18
#dummy is the only table when user enters dynamically ? – Sarvan Kumar Apr 23 '18 at 10:20
This table is the only place user entered the details means you need to create this table (dynamically) from which language to send the mail – Sarvan Kumar Apr 23 '18 at 10:21
yes correct. That is the only table, where user enters data in table format. – An User Apr 23 '18 at 10:23
if you use php for that email. You need to get only values (inside td) to array. using foreach to add the values into td. then echo it in the html... – Sarvan Kumar Apr 23 '18 at 10:26
Thank you. i wil recommend that this table should be created dynamically if not will convince them to enter the styles within the table. Thanks a lot for your help and suggestion – An User Apr 23 '18 at 10:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169578/discussion-between-sarvan-kumar-and-an-user). – Sarvan Kumar Apr 23 '18 at 10:29

css for HTML Email content not getting applied in gmail

2 Answers2