/ / Désalignement des e-mails HTML dans Outlook 2013? - html, css, email, outlook, alignement vertical

Mauvais alignement du courrier HTML dans Outlook 2013? - html, css, email, outlook, alignement vertical

J'ai un modèle de courrier électronique HTML très simple - justeutilisé pour les tests - et il a 5 colonnes avec un mot, le problème est dans Outlook 2013, la première colonne est toujours mal alignée verticalement. Voici le HTML.

  <!DOCTYPE html>
<html><body>
<table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
<table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
Row
</td>
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
Row
</td>
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
Row
</td>
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
Row
</td>
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
Row
</td>
</tr></table></td>
</tr></table></td>
</tr></tbody></table></body></html>

Le résultat dans Outlook 2013 est:

Outlook 2013

Ceci est le code généré par Outlook

<!DOCTYPE html><br />
<html><body>    <br />
<table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
<table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
Row<br />
</td><br />
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
Row<br />
</td><br />
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
Row<br />
</td><br />
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
Row<br />
</td><br />
<td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
Row<br />
</td><br />
</tr></table></td><br />
</tr></table></td><br />
</tr></tbody></table></body></html><br />

Le problème est lié à tous les tags BR supplémentaires ajoutés par Outlook, mais que puis-je faire à ce sujet?

Merci!

Réponses:

1 pour la réponse № 1

Autant que je sache, les styles externes ne sont pas pris en charge dans les e-mails et les styles doivent être appliqués en ligne par balise. Avez-vous essayé d'ajouter valign="top" sur chacun des tds imbriqués?

<td valign="top">
Row
</td>

Vous pouvez également essayer de fermer les espaces imbriqués dans vos balises, par exemple:

<td valign="top">Row</td>