wake-up-neo.com

Entspricht dem Float in Outlook

Ich versuche ein paar Tabellen zu float: left, aber gerade auf ein größeres Problem gestoßen, Outlook unterstützt Float nicht. Nun, dann habe ich versucht, Tischausrichtung und so weiter zu verwenden, aber ohne Glück. Die Tische erscheinen einfach untereinander statt nebeneinander. Was kann man dagegen tun?

PS: Es funktioniert gut auf anderen Geräten, es ist nur Outlook, und ich kann nicht jeder Tabelle einen td geben, da sonst etwas kaputt geht.

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>
htmlcssoutlookhtml-tablehtml-email
12
Thomas Teilmann

Stellen Sie Ihre Breiten für jede ausgerichtete Tabelle mit width = "" und nicht mit CSS ein.

Ein Beispiel, das funktioniert:

<!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>

Outlook fügt außerdem eine Lücke von 4 bis 5 Pixeln zwischen den ausgerichteten Tabellen ein. Wenn Sie dies hinzufügen, wird es auf etwa 1 Pixel reduziert:

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

Um es vollständig loszuwerden, müssen Sie Ihren Tabellen Rahmen hinzufügen (ein weiterer Outlook-Quirk-Hack).

24
John

Geben Sie einfach jedes Unter-table in ein eigenes td des äußeren table. Da die td nebeneinander liegen, werden auch die tables sein.

Beim Versuch, HTML-E-Mails zu erstellen, ist Code wie 1997 .

4
oezi

Wenn Sie mit den 2 Tabellen leben können, die in Outlook nicht "reagieren" ("untereinander"), hat dies für mich funktioniert:

........
<!--[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]-->
........
2
stefan

Verwenden Sie einige Online-Ressourcen wie: 

Wie man HTML-E-Mails codiert

Beim Rendern von HTML sind die meisten E-Mail-Clients primitiv und brechen viele gut geformte HTML-Elemente.

Die folgende Diskussion kann hilfreich sein: 

Welche Richtlinien für das Design von HTML-E-Mails gibt es?

Einige grundlegende Tipps:

  • Verwenden Sie Tabellen für das Layout.
  • Stellen Sie Ihren breitesten Tisch auf eine Breite von maximal 600px ein.
  • Versuchen Sie nicht, JavaScript oder Flash zu verwenden
  • Verwenden Sie kein CSS in einem style-Tag, da einige Mail-Clients es verwerfen.
  • Verwenden Sie nur Inline-CSS-Stile.
1
Zaheer Ahmed

Scheinbar filtert Outlook.com float-Attribute vollständig aus, unterstützt jedoch display: inline-block.
Natürlich wird dies höchstwahrscheinlich Ihre Tabellen beschädigen, da sie von display:table abhängen, aber es kann Ihnen bei jeder divs helfen.

0
Protector one

Ich weiß, dass das OP diese Frage schon lange nicht mehr veröffentlicht hat, aber ich hoffe, es hilft jedem, der es braucht.

Wenn Sie ein zweispaltiges Layout benötigen und möchten, dass es auch in Outlook funktioniert, geben Sie für jede Tabelle eine width von um 45% an (um sicher zu sein, werfen Sie auch dort einen align="left" hinein). Wenn Sie die Breite mit 50% angeben, wird sie von Outlook (das einen eigenen Kopf hat) als einzelne Spalte dargestellt.

0
user9347891