Equivalent to float in Outlook

后端未结

关注

 6  466

I am trying to float: left some tables, but just encountered a major problem, outlook doesn\'t support float. Well, then I tried to use table align and so forth

相关标签:

6条回答

星月不相逢

2020-11-30 08:23

Set your widths on each aligned table using width="", not CSS.

An example that works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    table td { border-collapse: collapse; }
    .msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;">&nbsp;<br>Table 1<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" align="left" style="padding: 0px;">&nbsp;<br>Table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

      </div>
    </td>
  </tr>
</table>

</body></html>

Also, Outlook puts a 4-5 pixel gap between the aligned tables. Adding this trims it down to about 1px:

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

To get rid of it completely, you'll have to add borders to your tables (another Outlook quirk hack).

0 讨论(0)

栀梦

2020-11-30 08:26
Use some online resources such as:

How To Code HTML Emails

When it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.

The following discussion may be helpful:

What guidelines for HTML email design are there?

Some basic tips:
- Use tables for layout.
- Set your widest table to be maximum of 600px wide.
- Don't try and use JavaScript or Flash
- Don't use CSS in a style tag as some mail clients will discard it.
- Use inline CSS styles only.
0 讨论(0)
发布评论:

提交评论
- 加载中...
[愿得一人]

2020-11-30 08:30

I know it's been long since the OP posted this question, but I hope it helps anyone who needs it.

If you need a 2 column layout, and you want it to work in Outlook as well, then provide a width of around 45% for each table (to be safe, throw in a align="left" too in there). If you specify the width as 50%, Outlook (which has a mind of its own) would render it as a single column.

0 讨论(0)
发布评论:

提交评论
- 加载中...
渐次进展

2020-11-30 08:32

It seems Outlook.com filters out float attributes completely, but does support display: inline-block.
Of course, this will most likely break your tables, as they depend on display:table, but it might help you with any divs.

0 讨论(0)
发布评论:

提交评论
- 加载中...

梦毁少年i

2020-11-30 08:39

If you can live with having the 2 tables not "responding" (one under each other) in Outlook, this worked for me:

........
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
<![endif]--> 

<!-- table 1 goes here -->

<!--[if gte mso 9]>
    </td>
    <td>
<![endif]-->

<!-- table 12 goes here -->

<!--[if gte mso 9]>
   </td>
  </tr>
</table>
<![endif]-->
........

0 讨论(0)

醉梦人生

2020-11-30 08:47

Just put every sub-table into an own td of the outer table. as the td's are besides each other, the tables will be too.

When trying to create HTML-EMails, Code like it’s 1997.

0 讨论(0)
发布评论:

提交评论
- 加载中...