web-dev-qa-db-fra.com

Équivalent à float dans Outlook

J'essaie de float: left certaines tables, mais je viens de rencontrer un problème majeur, Outlook ne supporte pas float. Eh bien, alors j'ai essayé d'utiliser table align et ainsi de suite, mais sans chance. Les tables apparaissent juste, les unes sous les autres, au lieu d'être côte à côte. Quelque chose peut-on faire à ce sujet?

PS: cela fonctionne très bien sur d’autres appareils, sur Outlook uniquement, et je ne peux pas en dire autant sur chaque table, car cela casserait d’autres choses.

balisage:

<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

Définissez vos largeurs sur chaque tableau aligné à l'aide de width = "", pas de CSS.

Un exemple qui fonctionne:

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

En outre, Outlook crée un écart de 4 à 5 pixels entre les tableaux alignés. Ajouter ceci réduit à environ 1px:

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

Pour vous en débarrasser complètement, vous devrez ajouter des bordures à vos tables (un autre bidon Outlook bizarre).

24
John

Il suffit de mettre chaque sous -table dans une propre td de la table extérieure. comme les tds sont l'un à côté de l'autre, le tables le sera aussi.

Lorsque vous essayez de créer du HTML-EMails, Code comme si c’était 1997 .

4
oezi

Si vous pouvez vivre avec le fait que les deux tables ne "répondent" pas (l'une sous l'autre) dans Outlook, cela a fonctionné pour moi:

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

Utilisez des ressources en ligne telles que: 

Comment coder des emails HTML

En ce qui concerne le rendu HTML, la plupart des clients de messagerie sont primitifs et détruisent de nombreux éléments HTML bien formés.

La discussion suivante peut être utile: 

Quelles sont les lignes directrices pour la conception de courrier électronique HTML?

Quelques conseils de base:

  • Utilisez des tableaux pour la mise en page.
  • Réglez votre table la plus large à 600px maximum.
  • N'essayez pas d'utiliser JavaScript ou Flash
  • N'utilisez pas CSS dans une balise de style, car certains clients de messagerie la supprimeront.
  • Utilisez uniquement des styles CSS en ligne.
1
Zaheer Ahmed

Il semble que Outlook.com filtre complètement les attributs float, mais prend en charge display: inline-block.
Bien sûr, cela va probablement casser vos tables, car elles dépendent de display:table, mais cela pourrait vous aider avec toutes les divs.

0
Protector one

Je sais que cela fait longtemps que le PO n'a pas posté cette question, mais j'espère que cela aidera tous ceux qui en ont besoin.

Si vous avez besoin d'une mise en page à 2 colonnes et que vous voulez que cela fonctionne également dans Outlook, fournissez une width d'environ 45% pour chaque table (pour plus de sécurité, ajoutez également un align="left" ici). Si vous spécifiez la largeur à 50%, Outlook (qui a son propre esprit) le rendrait sous la forme d'une colonne unique.

0
user9347891