HTML Emails Format is not working in Outlook

Question

My HTML email format is not functioning properly in outlook. The code is using angular and bootstrap css. I have used inline css specially for outlook but when i see the email in outlook table is stretched in full screen.

I have seen some question and used the implementation suggested in answers but still showing this problem. my code is as follow:

     <table class="table table-striped table-bordered table-condensed" width="320" style="margin-bottom: 20px;border: 1px solid #ddd; border-collapse: collapse">
        <tr ng-repeat="x in xall | orderBy:'name':false" style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px;">
          <th style="text-align: left; padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:40%;">Site Revenue</th>
          <td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="!data.isPrev">Â£850</td>
          <td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="data.isPrev">Â£500</td>
        </tr>
        <tr ng-repeat="x in xall | orderBy:'name':false" style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px;">
          <th style="text-align: left; padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:40%;">Product Revenue</th>
          <td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="!data.isPrev">Â£650</td>
          <td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="data.isPrev">Â£570</td>
        </tr>
      </table>

Please put some suggestions as I am totally stuck with this issue as width attribute is not functioning with outlook.

Here is a guide which shows each CSS attribute and which email clients they work in. https://www.campaignmonitor.com/css/ — th0ward, Apr 21 '15 at 07:55
Guys thanks for your time and suggestions. Can you please see my code there is nothing will be wrong but i am stuck width attribute. Width is functioning very different way. So please have a look into the and let me know what is wrong. — Jitendra Pareek, Apr 22 '15 at 04:17

score 4 · Accepted Answer · edited Mar 09 '18 at 14:51

4

I had the same problems. Here are some hints:

when you give padding attribute, it should go like this: padding:5px 5px 5px 5px;
floating (float) CSS attribute is not working in outlook.
when you give background color which need to be given as ( bgcolor ) in table attribute.
Write all CSS attributes inline

edited Mar 09 '18 at 14:51

Sarvan Kumar

926
1
11
27

answered Apr 21 '15 at 07:11

Prasanga

1,008
2
15
34

You can see my code I have used inline css as well. – Jitendra Pareek Apr 21 '15 at 10:36
( border-collapse: collapse; ) semicolon is missing, we need to consider these things when creating E-mail template. – Prasanga Apr 21 '15 at 11:45
I have a same issue in my template also. But the padding is still not working when i give padding:5px 5px 5px 5px; like this. – Sarvan Kumar Mar 09 '18 at 14:05

score 1 · Answer 2 · answered Apr 21 '15 at 12:54

1

The fact is that Outlook uses Word for rendering your HTML. Word is used as an email editor. Read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following series of articles:

Hope you will find that information helpful...

answered Apr 21 '15 at 12:54

Eugene Astafiev

47,483
3
24
45

Hi Eugene, I have a similar [question](https://stackoverflow.com/questions/51003595/email-design-looking-different-in-outlook-in-comparison-to-other-email-clients/51003795?noredirect=1#comment89001186_51003795). I am wondering if you can help me out. – flash Jun 23 '18 at 21:17

HTML Emails Format is not working in Outlook

2 Answers2