Prasadd
Prasadd

Reputation: 1

"Html Table bordering" not displayed correctly via outlook

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

Answers (1)

Chad Harrison
Chad Harrison

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

Related Questions