2017-06-06 14 views
-1

親テーブル内に2つの子テーブルを作成しました。テーブルの幅は、Outlook 2007/2010/2013および2016を除くすべての電子メールクライアントで正しく表示されます。右側の列は右側にシフトし、両側のTD幅(5%)は無視されます。誰もがこれで私を助けることができますか?ここで OutlookでTDの幅が無視される2007/2010/2013

はコードです:

`

    <!-- Second slider --> 
        <tr> 
         <td align="center" valign="top"> 
          <table class="parentTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> 
           <tr> 
            <!-- 1st column - spacing --> 
            <!-- <td valign="top" width="5%">&nbsp;</td> --> 

            <!-- 2nd column - left section --> 
            <td valign="top" width="50%"> 
             <table class="childTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> 
              <tr> 
               <td valign="top" width="5%" >&nbsp;</td> 
               <td width="40%"> 
                <table class="list-table_1" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> 
                 <tr> 
                  <td valign="top" align="left" > 
                   <p class="heading_1" style="font-family: Georgia, serif;">Left Column Content 1</p> 
                  </td> 
                 </tr> 

                 <tr> 
                  <td valign="top" align="center" height="10">&nbsp;</td> 
                 </tr>  
                 <tr> 
                  <td valign="top" align="center" > 
                   <img src="" class="img-responsive" alt="" style="max-width: 100%;" /> 
                  </td> 
                 </tr> 

                 <tr> 
                  <td valign="top" align="center" height="5">&nbsp;</td> 
                 </tr> 
                 <tr> 
                  <td valign="top" align="left" > 
                   <p class="heading_2" style="font-family:Georgia, serif;">Left Column Content 2</p> 
                  </td> 
                 </tr> 
                </table> 
               </td> 
               <td valign="top" width="5%" style="border-right:1px solid #0060af;">&nbsp;</td> 
              </tr> 
             </table> 
            </td> 

            <td valign="top" width="50%"> 
             <table class="childTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> 
              <tr> 
               <td valign="top" width="5%" >&nbsp;</td> 
               <td width="40%"> 
                <table class="list-table_1" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> 
                 <tr> 
                  <td valign="top" align="left" > 
                   <p class="heading_1" style="font-family: Georgia, serif;">Right Column Content 1</p> 
                  </td> 
                 </tr> 

                 <tr> 
                  <td valign="top" align="center" height="10">&nbsp;</td> 
                 </tr>  
                 <tr> 
                  <td valign="top" align="center" > 
                   <img src="" class="img-responsive" alt="" style="max-width: 100%;" /> 
                  </td> 
                 </tr> 

                 <tr> 
                  <td valign="top" align="center" height="5">&nbsp;</td> 
                 </tr> 
                 <tr> 
                  <td valign="top" align="left" > 
                   <p class="heading_2" style="font-family:Georgia, serif;">Right Column Content 2</p> 
                  </td> 
                 </tr> 

                </table> 
               </td> 
               <td valign="top" width="5%">&nbsp;</td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
        <!-- Second slider ends --> 

       </table> 



      </td> 
     </tr> 
    </table> 

`

おかげ

+0

IE 9,10,11などでもうまく見えますか? –

+0

Outlookはブラウザではなく、電子メールクライアントが同じように動作することは期待できません。 – Rob

+0

@Rob:私の悪い。ほとんどの電子メールクライアントは、同じやり方で動作しますが、まったく異なる動作をしますが、まったく異なる動作はしません。 –

答えて

1

わからないこれはあなたを助ける場合しかし、NBSPがあっても、Outlookが空のテーブルセルの幅と高さを無視する前に問題が発生しました。

アンダースコアのようなものを背景と同じ色で追加し、その違いがあるかどうかを確認することがあります。小さな透明なPNGも使えます。

もう1つの可能な方法は、幅を指定するのではなく、TDにパディングを使用することです。

+0

私はTDを使用する代わりにパディングを追加しましたが、今問題は右側のテーブルが滑り落ちることです。左側のテーブルは同じままです。右側のテーブルが下にスライドします。 –

関連する問題