email design looking different in outlook in comparison to other email clients

问题

I am working on html emails in which I have replicated a design using html and inline styles.

In the outlook, I am seeing the following design:

Design in the fiddle:

Attached is the fiddle for that where I have mentioned all my html and inline styles. In the fiddle, I am getting the different design in comparison to the design (Outlook) above.

Problem Statement:

I am wondering what changes I should do in the inline style of the fiddle so that the design in the fiddle and in the screenshot(outlook) above both looks the same.

The space beneath the text Steps to earn your money is too much in the outlook screenshot in comparison to the design in the fiddle. The snippets of code which I have used in that section are:

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
         <tr>
            <td>
               <h2 style="text-align: left;
                  padding-left: 19%;
                  color: #484848;
                  padding-top: 2.5%;
                  padding-bottom: 5%;
                  padding-right: 12%;">steps to earn your money:</h2>
            </td>
         </tr>
         <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
               1. click here to open the XYZ app to the posting requests page<br><br>
               2. click on availability check request<br><br>
               3. say yes, its availabile ot suggest another date it is<br><br>
               4. wait the 1 or 24 hour confirmation good<br><br>
               5. three days after the booking ends money will be send to your account<br><br>
            </td>
         </tr>
      </table>

回答1:

Had a quick check of your code and here is what i found:

You had the td and tr swapped at line 17 and 18 (just as Jason above mentioned)
You are using padding as percentage (line 55 i fixed). Its not a good idea, keep it at pixels for peace of mind. Change to pixels in other places as well.

<html>
<body>


 
  <table cellpadding="0" cellspacing="0" border="0" width="800" class="mobile"  align="center">

		 <tr>
		 <td>
		 <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="padding-left:6%;padding-bottom:5%;font-size:20px;color:#55BEC7;"> hi ABC,</td>
            
          </tr>
         
        </table>
</td>
		</tr>
		
	<tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;padding-left:5%;">
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">Mar 28/18 @ 7:00pm to <br> Mar 30/18 @ 7:00pm</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
          <tr>
            <td>
              <h2 style="text-align: left;
    padding-left: 20px;
    color: #484848;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;">steps to earn your money:</h2>
            </td>
          </tr>
          <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
                 1. click here to open the XYZ app to the posting requests page<br><br>
                 2. click on availability check request<br><br>
                 3. say yes, its availabile ot suggest another date it is<br><br>
                 4. wait the 1 or 24 hour confirmation good<br><br>
                 5. three days after the booking ends money will be send to your account<br><br>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Hope this helps.

来源：https://stackoverflow.com/questions/51003595/email-design-looking-different-in-outlook-in-comparison-to-other-email-clients

标签

html

css

html-table

outlook

html-email