I'm trying to convert a simple Web HTML into an Email HTML file. I was able to convert it into table structure which renders properly in Gmail but fails in Outlook.
The height and width of all the corresponding rows and columns are correct. I'm not able to figure out the reason why it breaks in Outlook.
Below is a screenshot of the working case from Gmail:
Below is a screenshot of the failing case from Outlook :
Fiddle for the HTML code : HTML file
<html><head></head><body><center><div align="left"><table cellpadding="0" cellspacing="0" height="131" width="750" border="0" style="padding-left:0; padding-right:0; padding-top:1; padding-bottom:1; table-layout:fixed; word-wrap:break-word;"><tbody><tr height="0"><td width="1"></td><td width="5"></td><td width="102"></td><td width="2"></td><td width="2"></td><td width="4"></td><td width="30"></td><td width="12"></td><td width="47"></td><td width="1"></td><td width="2"></td><td width="21"></td><td width="1"></td><td width="1"></td><td width="2"></td><td width="12"></td><td width="1"></td><td width="2"></td><td width="2"></td><td width="1"></td><td width="2"></td><td width="19"></td><td width="12"></td><td width="36"></td><td width="12"></td><td width="4"></td><td width="8"></td><td width="7"></td><td width="2"></td><td width="4"></td><td width="6"></td><td width="9"></td><td width="1"></td><td width="1"></td><td width="41"></td><td width="1"></td><td width="1"></td><td width="43"></td><td width="2"></td><td width="24"></td><td width="6"></td><td width="4"></td><td width="4"></td><td width="3"></td><td width="1"></td><td width="12"></td><td width="7"></td><td width="3"></td><td width="27"></td><td width="1"></td><td width="67"></td><td width="5"></td><td width="7"></td><td width="6"></td><td width="1"></td><td width="4"></td><td width="27"></td><td width="6"></td><td width="21"></td><td width="9"></td><td width="29"></td><td width="1"></td><td width="2"></td><td width="1"></td><td width="1"></td><td width="1"></td><td width="3"></td><td width="3"></td><td width="1"></td><td width="1"></td></tr><tr height="4"><td valign=top rowspan="2" width="1"></td><td valign=top colspan="67" width="747"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left:0px;font-size: 9pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 9pt;font-family: Arial;text-align:left;">-</span> </p></div></td><td valign=top colspan="2" rowspan="2" width="2"></td></tr><tr height="4"><td valign=top colspan="67" width="747"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left:0px;font-size: 9pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 9pt;font-family: Arial;text-align:left;">-</span> </p></div></td></tr><tr height="9"><td valign=top colspan="2" rowspan="3" style="background-color:#072460;" width="6"></td><td valign=top colspan="25" rowspan="3" style="background-color:#072460;" width="338"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);padding-left: 8px;font-size: 16pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);font-weight: bold;font-size: 16pt;font-family: Arial;text-align:left;">Lorem ipsum dolor sit </span><span style="color: rgb(255,255,255);font-weight: bold;font-size: 16pt;font-family: Arial;text-align:left;">consectetur </span> </p></div></td><td valign=top colspan="42" style="background-color:#072460;" width="405"></td><td valign=top rowspan="9" width="1"></td></tr><tr height="16"><td valign=top colspan="3" style="background-color:#072460;" width="13"></td><td valign=top colspan="12" style="background-color:#072460;" width="139"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Vivamus tincidunt:</span> </p></div></td><td valign=top style="background-color:#072460;" width="4"></td><td valign=top colspan="12" style="background-color:#072460;" width="140"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Vestibulum </span> </p></div></td><td valign=top style="background-color:#072460;" width="4"></td><td valign=top colspan="9" style="background-color:#072460;" width="97"><div><div style="overflow: hidden;word-break: break-word;overflow-x:hidden;overflow-y:hidden;"><span style="color:rgb(255, 255, 255);direction:ltr;font-family:Arial;font-size:10pt;font-style:normal;font-variant:normal;font-weight:normal;line-height:100%;text-decoration:none;vertical-align:baseline;white-space:normal;"><div style="text-align:right;"><a href="https://www.lipsum.com/feed/html" style="color:rgb(255, 255, 255);font-size:10pt;text-decoration:underline;">Lorem Ipsum</a></div></span></div></div></td><td valign=top colspan="4" style="background-color:#072460;" width="8"></td></tr><tr height="27"><td valign=top colspan="42" style="background-color:#072460;" width="405"></td></tr><tr height="16"><td valign=top colspan="30" rowspan="4" style="background-color:#072460;" width="357"></td><td valign=top colspan="13" style="background-color:#072460;" width="143"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Nulla convallis:</span> </p></div></td><td valign=top colspan="12" style="background-color:#072460;" width="140"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Aliquam amet</span> </p></div></td><td valign=top style="background-color:#072460;" width="4"></td><td valign=top colspan="9" style="background-color:#072460;" width="97"><div><div style="overflow: hidden;word-break: break-word;overflow-x:hidden;overflow-y:hidden;"><span style="color:rgb(255, 255, 255);direction:ltr;font-family:Arial;font-size:10pt;font-style:normal;font-variant:normal;font-weight:normal;line-height:100%;text-decoration:none;vertical-align:baseline;white-space:normal;"><div style="text-align:right;"><a href="https://www.lipsum.com/feed/html" style="color:rgb(255, 255, 255);font-size:10pt;text-decoration:underline;">Phasellus</a></div></span></div></div></td><td valign=top colspan="4" rowspan="4" style="background-color:#072460;" width="8"></td></tr><tr height="16"><td valign=top colspan="13" style="background-color:#072460;" width="143"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Donec eget velit:</span> </p></div></td><td valign=top colspan="22" style="background-color:#072460;" width="241"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Nunc metus</span> </p></div></td></tr><tr height="16"><td valign=top colspan="13" style="background-color:#072460;" width="143"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Duis rhoncus enim:</span> </p></div></td><td valign=top colspan="22" style="background-color:#072460;" width="241"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Vivamus </span> </p></div></td></tr><tr height="16"><td valign=top colspan="13" style="background-color:#072460;" width="143"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-size: 10pt;font-family: Arial;text-align:left;">Praesent laoreet:</span> </p></div></td><td valign=top colspan="22" style="background-color:#072460;" width="241"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(255,255,255);white-space: nowrap;padding-left: 8px;font-size: 10pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(255,255,255);white-space:nowrap;font-weight: bold;font-size: 10pt;font-family: Arial;text-align:left;">Pellentesque </span> </p></div></td></tr><tr height="3"><td valign=top colspan="69" style="background-color:#072460;" width="749"></td></tr><tr height="4"><td valign=top colspan="2" style="background-color:#072460;" width="6"></td><td valign=top colspan="63" style="background-color:#072460;" width="735"><div><p style="padding-top:0px;padding: 0px;word-wrap: break-word;margin: 0px;color: rgb(7,36,96);white-space: nowrap;padding-left:0px;font-size: 9pt;padding-bottom:0px;margin-right:0px;margin-left:0px;margin-top:0px;font-family: Arial;margin-bottom:0px;text-align: left;padding-right:0px;"> <span style="color: rgb(7,36,96);white-space:nowrap;font-size: 9pt;font-family: Arial;text-align:left;">-</span> </p></div></td><td valign=top colspan="4" style="background-color:#072460;" width="8"></td></tr></tbody></table></div></center></body></html>Can you please let me know how to make it correct and consistent across both Gmail and Outlook?
Thanks in advance.