Équivalent à flotter dans les perspectives
j'essaie de float: left certaines tables, mais vient de rencontrer un problème majeur, outlook ne supporte pas float. J'ai essayé d'utiliser la table alignée et ainsi de suite, mais sans succès. Les tables apparaissent juste, l'une sous l'autre, au lieu d'être à côté de l'autre. Tout ce qu'on peut faire à ce sujet?
PS: il fonctionne sur d'autres appareils très bien, son seul Outlook, et je ne peux pas donner à chaque table un td, car il va casser 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>
5 réponses
Définissez vos largeurs sur chaque table alignée en utilisant width="", pas 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"> </td>
<td width="290" bgcolor="454545" align="left" style="padding: 0px;"> <br>Table 1<br>...<br>
</td>
<td width="15" bgcolor="454545"> </td>
</tr>
</table>
<table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
<tr>
<td width="15" bgcolor="959595"> </td>
<td width="290" bgcolor="959595" align="left" style="padding: 0px;"> <br>Table 2<br>...<br>
</td>
<td width="15" bgcolor="959595"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body></html>
aussi, Outlook met un écart de 4-5 pixels entre les tableaux alignés. En ajoutant ceci, on 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 hack Outlook quirk).
vient de mettre chaque sous - table dans un propre td de l'extérieur table . comme les td 's sont en dehors de l'autre, les table s seront aussi.
en essayant de créer des e-mails HTML, Code comme c'est 1997 .
si vous pouvez vivre avec les 2 tableaux ne" répondre "pas (un 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]-->
........
utilisez certaines ressources en ligne telles que:
quand il s'agit de rendre HTML, la plupart des clients email sont primitifs et vont casser beaucoup d'éléments HTML bien formés.
la discussion suivante peut être utile:
quelles sont les lignes directrices pour la conception du courriel HTML?
quelques conseils de base:
- utiliser des tableaux pour la mise en page.
- Réglez votre table la plus large pour un maximum de 600px de large.
- N'essayez pas de les utiliser Flash ou JavaScript
- N'utilisez pas CSS dans une étiquette de style car certains clients de courrier l'élimineront.
- utiliser les styles css en ligne seulement.
il semble Outlook.com filtre complètement les attributs float , mais supporte display: inline-block .
Bien sûr, cela cassera très probablement vos tables , car ils dépendent de display:table , mais il pourrait vous aider avec n'importe quel div s.