Reputation: 1
I have below html which is displaying correct output when checked on any html viewer.
Especially table bordering is displayed correctly.
But when sent an email of this output in outlook; the table bordering is messed up "only for alternate tables" as in Image2
<style type="text/css">h1, body {font-family: Arial, verdana;} table{font-size:11px; border-collapse:collapse; border:0px solid #F5F5EB;} td{background-color:#F5F5EB;border:1px solid #E7E7CF;} div{text-align: right;} h5{font-weight: normal;} h4{font-weight: normal;margin-left: 0;} th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style> <H5><U>0-10 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>l_sapcus</td><td>pan</td><td>none</td><td><div>Aug 30 2011 6:03PM</div></td><td><div>Aug 30 2011 6:05PM</div></td><td><div>2</div></td><td><div>1395</div></td><td><div>3</div></td><td><div>46400</div></td></tr><tr><td>l_lirtagupdate</td><td>pan</td><td>none</td><td><div>Aug 31 2011 4:17AM</div></td><td><div>Aug 31 2011 4:21AM</div></td><td><div>4</div></td><td><div>781</div></td><td><div>5</div></td><td><div>15500</div></td></tr></table>
<style type="text/css">h1, body {font-family: Arial, verdana;} table{font-size:11px; border-collapse:collapse; border:0px solid #F5F5EB;} td{background-color:#F5F5EB;border:1px solid #E7E7CF;} div{text-align: right;} h5{font-weight: normal;} h4{font-weight: normal;margin-left: 0;} th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style> <H5><U>10-30 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>h_movsap</td><td>pan</td><td>none</td><td><div>Aug 31 2011 1:16AM</div></td><td><div>Aug 31 2011 1:40AM</div></td><td><div>24</div></td><td><div>962</div></td><td><div>20</div></td><td><div>4700</div></td></tr><tr><td>l_mslirdelta</td><td>pan</td><td>none</td><td><div>Aug 31 2011 4:03AM</div></td><td><div>Aug 31 2011 4:16AM</div></td><td><div>13</div></td><td><div>795</div></td><td><div>29</div></td><td><div>2600</div></td></tr><tr></table>
<style type="text/css">h1, body {font-family: Arial, verdana;} table{font-size:11px; border-collapse:collapse; border:0px solid #F5F5EB;} td{background-color:#F5F5EB;border:1px solid #E7E7CF;} div{text-align: right;} h5{font-weight: normal;} h4{font-weight: normal;margin-left: 0;} th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style> <H5><U>30-60 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>l_cogsap</td><td>pan</td><td>none</td><td><div>Aug 31 2011 3:33AM</div></td><td><div>Aug 31 2011 4:31AM</div></td><td><div>58</div></td><td><div>825</div></td><td><div>59</div></td><td><div>1200</div></td></tr><tr><td>c_lirtagsdaily</td><td>pan</td><td>none</td><td><div>Aug 31 2011 4:01AM</div></td><td><div>Aug 31 2011 4:22AM</div></td><td><div>21</div></td><td><div>797</div></td><td><div>39</div></td><td><div>1900</div></td></table><style type="text/css">h1, body {font-family: Arial, verdana;} table{font-size:11px; border-collapse:collapse; border:0px solid #F5F5EB;} td{background-color:#F5F5EB;border:1px solid #E7E7CF;} div{text-align: right;} h5{font-weight: normal;} h4{font-weight: normal;margin-left: 0;} th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style> <H5><U>60-90 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>l_mslbid</td><td>pan</td><td>none</td><td><div>Aug 30 2011 7:08PM</div></td><td><div>Aug 30 2011 8:21PM</div></td><td><div>73</div></td><td><div>1330</div></td><td><div>68</div></td><td><div>1800</div></td></tr><tr><td>l_mslir</td><td>pan</td><td>none</td><td><div>Aug 31 2011 5:01AM</div></td><td><div>Aug 31 2011 5:27AM</div></td><td><div>26</div></td><td><div>737</div></td><td><div>62</div></td><td><div>1000</div></td></tr></table>
Upvotes: 0
Views: 5555
Reputation: 2868
I've done some research on this and turns out that HTML Rendering engine for outlook is quite dated. If you are trying to send html based emails here are some guidlines found:
http://groundwire.org/support/articles/css-and-email-newsletters/
http://www.codesurgeon.net/theblog/web/html-email-guidelines/
http://kb.mailchimp.com/article/how-to-code-html-emails/
Upvotes: 1