Equivalent to float in Outlook

问题

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, but without luck. The tables just show up, under each other, instead of beside each other. Anything one can do about this?

PS: it works on other devices just fine, its only Outlook, and I can't give each table a td, since it will break some other stuff.

markup:

<table class="products">
   <tr>
      <td align="left" class="test">
         <!-- Product 1  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 2  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 3 -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <span class="clear"></span>    
      </td>
   </tr>
 </table>

回答1:

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).

回答2:

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.

回答3:

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]-->
........

回答4:

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.

回答5:

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.

回答6:

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.

来源：https://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook

标签

html

css

outlook

html-table

html-email