2016-08-06 9 views
0

ユーザーに送信されるHTMLテンプレートを作成しようとしています。レンダリングされた電子メールの問題は、リストが正しく表示されないこと、失われています。この問題はOutlook上で発生しますが、ブラウザでは書式設定は正しいです。Outlookでレンダリングされた電子メールのulタグで問題が発生する

私は次のスレッド(Trouble with ol and ul tags in email sent with Outlook)に続き、テーブルを使ってリストを模倣しようとしました。 1つのリストでうまく動作します。しかし、リストがネストされているので、レンダリング設定を正しく取得できません。私は、次のアプローチを踏襲している

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="20" align="center" valign="top">&bull;</td> 
     <td align="left" valign="top"></td> List Item 1: </td> 
    </tr> 
    <tr> 
     <td></td> // Empty column, since sub-list should be at different level 
     <td> 
      <table cellspacing="0" cellpadding="0"> 
      <tr> 
      <td width="20" align="center" valign="top">&#10004;</td> 
      <td align="left" valign="top"></td> Nested List Item 1: </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
</table> 

私はまた、代わりに、ネストされたテーブルの余分な空の列を、滑走により巣に内側のリストを試してみました。

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="20" align="center" valign="top">&bull;</td> 
     <td align="left" valign="top"></td> List Item 1: </td> 
    </tr> 
    <tr> 
     <td width="20"></td> // empty column 
     <td width="20" align="center" valign="top">&bull;</td> 
     <td align="left" valign="top"></td> Nested List Item 1: </td> 
    </tr> 
</table> 

これまでは解決できません。どんな入力も感謝します。

+0

あなたはそれが見えるように何をしたいですか?あなたのHTMLは間違っています...ここではあまりにも多くのTDを閉じています:リスト項目1:。また、コードのjsfiddleを提供できますか?正しいものを編集してリンクします。 – trismi

答えて

1

コードには閉じているTDが多すぎます。また、入れ子になったリストは入れ子になっているアイテムのTDの中に入れなければなりません。将来のコードを見ている人は、ネストされたリストが最初のTDの内側にある場合、項目。ここで

はJSfiddleです:https://jsfiddle.net/jabafpts/

そして最後に、コード:

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="20" align="center" valign="top">&bull;</td> 
     <td align="left" valign="top"> List Item 1 
      <table cellspacing="0" cellpadding="0"> 
      <tr> 
      <td width="20" align="center" valign="top">&#10004;</td> 
      <td align="left" valign="top">Nested List Item 1 </td> 
      </tr> 
      <tr> 
      <td width="20" align="center" valign="top">&#10004;</td> 
      <td align="left" valign="top">Nested List Item 2 </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td width="20" align="center" valign="top">&bull;</td> 
     <td align="left" valign="top"> List Item 2</td> 
    </tr> 
</table> 
+0

ありがとう、これは魅力的に働いた:) – AgentX

関連する問題