Отзывчивый Email (Outlook 2016) выпускает

Question

Я использовал this responsive email template разработать шаблон отчета по электронной почте в виде таблиц, но, к сожалению, это делает ужасно на прогноз рабочего стола 2016 года

Я признателен за любую форму помощи я могу получить, чтобы сделать свой шаблон вид лучше на рабочем столе Outlook.
Вот фрагмент кода для табличной области шаблона:

<tr> 
    <td align="center" valign="top"> 
    <!-- CENTERING TABLE // --> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tr> 
     <td align="center" valign="top"> 
      <!-- FLEXIBLE CONTAINER // --> 
      <table border="0" cellpadding="5" cellspacing="0" width="600" class="flexibleContainer"> 
      <tr> 
       <td align="center" valign="top" width="600" class="flexibleContainerCell" style="background-color:#dd4f05;"> 
       <!-- CONTENT TABLE // --> 
       <table border="0" cellpadding="10" cellspacing="0" width="100%" style='table-layout:fixed'> 
        <thead style="color: #ffffff; line-height: 200%; font-family:Tahoma,Verdana,Segoe,sans-serif; font-size: 15px; margin-top: 3px; margin-bottom: 3px; text-align: right; font-weight: bold"> 
        <col width=6 /> 
        <col width=10 /> 
        <col width=6 /> 
        <tr> 
         <th align="left">Category</th> 
         <th>Novemeber Spend</th> 
         <th align="left">Vs October </th> 
        </tr> 
        </thead> 
        <tbody style="color: #ffffff; line-height: 200%; font-family: Tahoma,Verdana,Segoe,sans-serif; font-weight: normal; margin-top: 3px; margin-bottom: 3px; text-align: left;"> 
        <tr> 
         <td style="font-size: 20px;" align="left">Food</td> 
         <td align="right" style="font-size: 30px;">&#8358;1,234,567.00</td> 
         <td align="right"> 
         <div style="font-size: 25px;color: #008000; float: left">&#9650;</div> 
         <p style="float: left; margin: 0; font-size: 20px">23%</p> 
         </td> 
        </tr> 
        <tr> 
         <td style="font-size: 20px;" align="left">Gadgets</td> 
         <td align="right" style="font-size: 30px;">&#8358;901,234.00</td> 
         <td align="right"> 
         <div style="font-size: 25px;color: #008000; float: left">&#9650;</div> 
         <p style="float: left; margin: 0; font-size: 20px">74%</p> 
         </td> 
        </tr> 
        <tr> 
         <td style="font-size: 20px;" align="left">Entertainment</td> 
         <td align="right" style="font-size: 30px;">&#8358;789,012.00</td> 
         <td align="right"> 
         <div style="font-size: 25px;color: #008000; float: left">&#9650;</div> 
         <p style="float: left; margin: 0; font-size: 20px">23%</p> 
         </td> 
        </tr> 
        <tr> 
         <td style="font-size: 20px;" align="left">School Fees</td> 
         <td align="right" style="font-size: 30px;">&#8358;567,890.00</td> 
         <td align="right"> 
         <div style="font-size: 25px;color: #008000; float: left">&#9650;</div> 
         <p style="float: left; margin: 0; font-size: 20px">10%</p> 
         </td> 
        </tr> 
        <tr> 
         <td style="font-size: 20px;" align="left">Health Care</td> 
         <td align="right" style="font-size: 30px;">&#8358; 345,678.00</td> 
         <td align="right"> 
         <div style="font-size: 25px;color: #008000; float: left">&#9650;</div> 
         <p style="float: left; margin: 0; font-size: 20px">6%</p> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <!-- // CONTENT TABLE --> 
       </td> 
      </tr> 
      </table> 
      <!-- // FLEXIBLE CONTAINER --> 
     </td> 
     </tr> 
    </table> 
    <!-- // CENTERING TABLE --> 
    </td> 
</tr> 

Как это выглядит на веб-версии Gmail и Yahoo:



Как это выглядит на рабочем столе клиента прогноз (Ужасно):

Answer 1

Я предлагаю изменить в последнем столбце до диапазона, удалите float: слева и от него, и от абзаца - на самом деле, полностью удалите тег абзаца и добавьте размер шрифта в тег, который должен быть выровнен по левому краю, а не справа. Вы даете слишком много противоречивых инструкций для плохого маленького Outlook.

Answer 2

Я настоятельно рекомендую использовать дисплей: встроенный блок, поскольку поплавки вообще не работают с Outlook. Это a great reference относительно того, что делает и не работает с электронными письмами.