0

このレスポンシブ メール テンプレートを使用して、表形式のレポート メール テンプレートをデザインしましたが、残念ながら、Outlook デスクトップ 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 の Web バージョンでの 表示方法: Outlook デスクトップ クライアントでの表示方法 (ひどい):

Gmail のスクリーン ショット



Outlook デスクトップ クライアント

4

2 に答える 2

3

フロートは Outlook ではまったく機能しないため、display: inline-block を使用することを強くお勧めします。これは、電子メールで何が機能し、何が機能しないかについての優れたリファレンスです。

于 2016-11-28T21:07:32.150 に答える
1

その最後の列の をスパンに変更し、float: left をそれと段落の両方から削除することをお勧めします。実際、段落タグを完全に削除し、タグに font-size を追加します。右。かわいそうに小さな Outlook が従うには、相反する指示が多すぎます。

于 2016-11-28T20:59:00.750 に答える