email - Remove cell border in HTML mail in Outlook 2013 -


i'm trying remove 3 cell borders table in html mail. current situation this:

what have what have

what want what want

code:

<html>      <head>          <style type="text/css">              body             {                 font-family:calibri, arial, sans-serif;                 font-weight:normal;             }              table             {                 font-family:calibri, arial, sans-serif;                 font-weight:normal;                 font-size:14px;                 border-color:#cccccc;                 border-collapse:collapse;                 width:700px;             }              table th             {                          font-weight:bold;                                padding:10px 5px;                 border-style:solid;                 border-width:1px;                 word-break:normal;                 border-color:#cccccc;                 background-color:#f0f0f0;             }              table td             {                 padding:10px 5px;                 border-style:solid;                 border-width:1px;                 word-break:normal;                 border-color:#cccccc;                 background-color:#ffffff;             }              .td-left-column             {                 font-style:italic;                 background-color:#f0f0f0;                 text-align:right;                 white-space:nowrap;                 width:100px;             }              p.italic             {                 font-style:italic             }          </style>      </head>      <body>          script          <br><br>          <em>' + $scriptname + '</em>          has sent notification. see below details...          <br><br>          <table>              <tr>                 <th colspan="2">script</th>             </tr>              <tr>                 <td class="td-left-column">path</td>                 <td>' + $scriptpath + '</td>             </tr>              <tr>                 <td class="td-left-column">server</td>                 <td>' + $server + '</td>             </tr>              <tr>                 <td class="td-left-column">name</td>                 <td>' + $scriptname + '</td>             </tr>              <tr>                 <td class="td-left-column">log-file</td>                 <td>' + $logfilecell + '</td>             </tr>          </table>                          <table>              <tr>                 <th colspan="5">backup report</th>             </tr>              <tr>                 <td class="td-left-column" colspan="2">path</td>                 <td colspan="3">' + $bckpdir + '</td>             </tr>              <tr>                 <td class="td-left-column" colspan="2">save type</td>                 <td colspan="3">' + $savetype + '</td>             </tr>              <tr>                 <td class="td-left-column" colspan="2">objects saved</td>                 <td colspan="3">' + $filessaved + '/' + $totalbckpfiles + '</td>             </tr>              <tr>                 <td class="td-left-column" colspan="2">start</td>                 <td colspan="3">' + $date + ' // ' + $time + '</td>             </tr>              <tr>                 <td class="td-left-column" colspan="2">end</td>                 <td colspan="3">' + (get-date -format d) + ' // ' + (get-date -format t) + '</td>             </tr>              <tr>                 <td class="td-left-column" style="width:50px;"></td>                 <td class="td-left-column" style="width:50px;">task</td>                  <td style="width:200px;text-align:center"><b>ftp download</b></td>                 <td style="width:200px;text-align:center"><b>winrar archive</b></td>                 <td style="width:200px;text-align:center"><b>total</b></td>             </tr>              <tr>                 <td class="td-left-column" style="width:50px;"></td>                 <td class="td-left-column" style="width:50px;">runtime</td>                  <td style="width:200px;text-align:center">' + $ftpdlrt + '</td>                 <td style="width:200px;text-align:center">' + $archivert + '</td>                 <td style="width:200px;text-align:center">' + $bckprt + '</td>             </tr>              <tr>                 <td class="td-left-column" colspan="2">size</td>                 <td colspan="3">' + [system.math]::round(($bckpsize / 1gb), 1) + ' gb</td>             </tr>              ' + $compsize + '              <tr>                 <td class="td-left-column" colspan="2">free disk space</td>                 <td colspan="3">' + [system.math]::round(($bckpdsk.freespace / 1tb), 1) + ' tb</td>             </tr>          </table>          <br><br>          <table>              <tr>                 <th style="width:100px">id</th>                  <th style="width:200px">file name</th>                  <th style="width:200px">size</th>                  <th style="width:200px">status</th>             </tr>              ' + $allfilerows + '          </table>      </body>  </html> 

so far i've tried setting border color background color of cell no luck. hiding border border-bottom-style:hidden did not work.

even more confusing when add border-left-color:#f0f0f0 <td class="td-left-column" style="width:50px;"></td> left border disappears. when try right border though, doesn't work.

i've set fiddle right here: https://jsfiddle.net/lk6bf5mm/3/ problem if looks in fiddle, doesn't mean same in outlook.

thanks help.

one issue may causing problem outlook stripping section out email. make sure add css inline elements. try setting border 0 , use inline css style border on individual elements:

<table border="1"> 

outlook 2013 uses word display html has different rules. can read more html , css allowed here:

word 2007 html , css rendering capabilities in outlook 2007 (part 1 of 2)

word 2007 html , css rendering capabilities in outlook 2007 (part 2 of 2)


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -