I am trying to create an html template that will be sent to users. The problem with the email provided is that the lists are not displayed correctly, the formatting and nested list structure is lost. This issue applies to Outlook, while the formatting is correct in the browser.
I performed the following thread ( Problem with ol and ul tags in email sent with Outlook ) and tried to simulate a list using a table. It works great for a single list. But since I have nested lists, I cannot set up the rendering correctly.
I have followed the following approaches:
<table cellspacing="0" cellpadding="0"> <tr> <td width="20" align="center" valign="top">•</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">✔</td> <td align="left" valign="top"></td> Nested List Item 1: </td> </tr> </table> </td> </tr> </table>
I also tried nesting the internal list by paying an extra empty column instead of the nested table.
<table cellspacing="0" cellpadding="0"> <tr> <td width="20" align="center" valign="top">•</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">•</td> <td align="left" valign="top"></td> Nested List Item 1: </td> </tr> </table>
But so far I can’t fix it. Any inputs would be appreciated.
source share