I'm having problems with creating some HTML emails to display correctly in Outlook desktop 2013, I've managed to solved all my problems up until now about from this border issue that I just can't understand.
Basically in the outlook web app my table looks like this: http://imgur.com/EqbluKF
But on Outlook 2013 it somehow looks like this: http://imgur.com/s1ZQRqW
Here's my table code before outlook eats it up and makes this mess:
<table cellspacing="0" cellpadding="1" border="0" align="center" width="100%" style="margin:auto;">
<thead>
<tr height="40" style="background-color: #CFE1D3; ">
<th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Item') ?></strong></th>
<th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Product Code') ?></strong></th>
<th align="center" width="30%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Product Description') ?></strong></th>
<th align="center" width="10%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 1px 0 1px;"><strong><?php echo $this->__('Quantity') ?></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;"><img src="images/product" alt="test" width="100%" height="auto" align="left" /></td>
<td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">test</td>
<td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">This is a test</td>
<td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-top-width: 0;">1</td>
</tr>
</tbody>
I came across this question quickly when searching for an answer, but none of the other answers worked for me.
In my case the answer was to use the following inline style on my <table>
:
style="border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"