开发者

Outlook collapse of table cells in HTML emails

开发者 https://www.devze.com 2023-03-14 04:19 出处:网络
I have come across this issue and have yet to be able to find a solution to it. With an html e-mail I have found that in some Outlook programs it will collapse the cell. Both 2007/2010 For instance:

I have come across this issue and have yet to be able to find a solution to it. With an html e-mail I have found that in some Outlook programs it will collapse the cell. Both 2007/2010 For instance:

<tr>
    <td width="10"><img></td>
    <td width="80">Copy</td>
    <td width="10"><img></td>
</tr>

What happens is that Outlook ignores the width of the middle column's cell. It also doesn't matter if I use CSS for the widths.

<tr>
    <td style="width:10px;"><img></td>
    <td style="width:80px;">Copy</td>
    <td style="width:10px;">&l开发者_运维知识库t;img></td>
</tr>

This has the same results.

The thing I haven't been able to figure out, is the setting in Outlook that causes this collapsing of the cell's width. And typically, it only happens in Outlook for the CEO of our company. I no longer code a cell with copy in it this way anymore as I have a more rock solid way that works, but sometimes marketing thinks they know what they are doing and changes the code on me thinking it will work, when I know it will not on the CEO's computer in Outlook.

Does anybody know what setting in Outlook causes this? I'd love to have this setting on my computer so I don't need to but the CEO to test it.


Can you provide a more extensive code example w/ a whole table and not just one row? Would help give a clue why this is happening.

Anyway, something that works for me in Outlook is to add a top row in the table that forces the column widths to exact heights. A 1x1 transparent GIF, with widths set in addition to table cell widths, seems to work as a 'brute force' method that even Outlook listens to:

<table>
  <tr>
    <td width="10" height="1"><img width="10" height="1" /></td>
    <td width="80" height="1"><img width="80" height="1" /></td>
    <td width="10" height="1"><img width="10" height="1" /></td>
  </tr>

and then rows beneath that conform to the column widths of that top row.


I was running into this issue in Outlook 2013 for Windows. It worked fine in Outlook for Mac (and Gmail, and pretty much every other modern email client) but in Outlook 2013 for Windows, it would completely collapse everything.

The solution was simple: do NOT put in px if you are declaring a pixel width (with the exception of inline styles). You have to be really old school. Here was my final (working) code:

    <table cellspacing="0" cellpadding="0" border="0">
    <tr>

    <td width="1" align="left" valign="top" bgcolor="#ffffff"><img src="#"></td>
    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 1</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none; text-decoration: none;" href="#">SECTION 2</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 3</a></span></td>

    <td width="149" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 4</a></span></td>

    </tr>
    </table>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号