CODEWITHSUNDEEP
cssemailoutlookphpmailerhtml-table
1252748
1252748

Reputation: 15379

Cell padding accurate in Gmail, but not in Microsoft Outlook

I have a php email that is received by our company's email client, microsoft outlook. I also get a copy in my gmail. Everything looks fine in gmail:

This php / html:

$remainder = <<<EOD

<tr>
    <td colspan='2' style='font-size:12pt; padding:5px 0px 5px 3px; background-color:#F7F7F7;'>
    Product details
    </td>
</td>


<tr>
    <td style="width:150px;font-size:10pt; padding:10px 8px 0px 3px;" align="left">
        Product type:
    </td>

    <td style='font-size:10pt; padding:10px 0px 0px 0px;'>
        {$product}
    </td>
</tr>


<tr>
    <td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
        Quantity:
    </td>

    <td style='font-size:10pt; padding:10px 0px 0px 0px;'>
        {$qty}
    </td>
</tr>       



<tr>
    <td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
        Product size:
    </td>

    <td style='font-size:10pt; padding:10px 0px 0px 0px;'>
        {$productSize}
    </td>
</tr>



<tr>
    <td style='width:150px;font-size:10pt; padding:30px 8px 0px 3px;' align="left">
        Account executive:
    </td>

    <td style='font-size:10pt; padding:30px 0px 0px 0px;'>
        {$accountExec}
    </td>
</tr>

produces something that looks like this in gmail: (minus the part at the top i didn't crop)

gmail screenshot

However, in microsoft outlook, I get something that looks like this (with much inflated padding.

I can see by looking at the elements in the browser (when I forward the element back to gmail from msOutlook) that several different elements are being added. Why would this happen? Is there anyway to prevent it?

explanation of html in chrome console

ms outlook printout

How could I make this so it looks right in both?

Thanks!

Upvotes: 0

Views: 1353

Answers (1)

yunzen
yunzen

Reputation: 33449

I suggest wrapping the content of every table cell in a div and give the padding to that div and not the td

Upvotes: 1

Related Questions