CODEWITHSUNDEEP
htmlcssemailoutlookoutlook-2013
markusbrutus
markusbrutus

Reputation: 51

Outlook changing border css on table

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: https://i.sstatic.net/vpTui.jpg

But on Outlook 2013 it somehow looks like this: https://i.sstatic.net/b8jFp.jpg

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>

Upvotes: 5

Views: 25640

Answers (3)

Jim Billig
Jim Billig

Reputation: 344

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;"

Upvotes: 4

Pebbs
Pebbs

Reputation: 305

Try using a 6 digit hexadecimal colour code instead on your border-color: #777777, 3 digit hex codes are not fully supported across various clients, and you will find that the color may change between them. (While if you use a 6 digit it will be consistent across everything so try and make that a habit).

Litmus blog on this

Your should also add style="display:block"; within all of your image tags.

Upvotes: 2

Aetherus
Aetherus

Reputation: 8898

Have yout tried adding border-collapse: collapse to the table's style attribute? Basically Outlook supposes that the borders of the table cells should not overlap, unless being told to.

Upvotes: 1

Related Questions