Espacement supplémentaire entre les lignes dans Outlook 2010

Question

J'utilise une table pour truquer une liste à puces dans mon e-mail HTML. Il ressemble beaucoup à chaque client, sauf Outlook 2010, ce qui ajoute de l'espace extra blanc entre chaque ligne:

Le tableau cellpadding et cellspacing est réglé sur 0 et je tenté de mettre explicitement la line-height dans chaque ligne de la table.

Le code:

<table width="100%" style="table-layout: fixed; margin-bottom: 21px; border: none;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td> 
    <td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td> 
    </tr> 
    <tr> 
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td> 
    <td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td> 
    </tr> 
    <tr> 
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td> 
    <td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td> 
    </tr> 
</table> 

Answer 1

Le problème est le style margin-bottom appliqué au parent table. Outlook applique ce style aux éléments enfants de sorte que chaque td dispose d'une marge inférieure de 21px. Retirez la marge inférieure et utiliser une ligne de tableau blanc pour simuler une marge inférieure à la place:

<table width="100%" class="list-table" style="table-layout: fixed; border: none;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td> 
    <td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td> 
    </tr> 
    <tr> 
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td> 
    <td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td> 
    </tr> 
    <tr> 
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td> 
    <td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td> 
    </tr> 
    <tr> 
    <td width="100%" height="21" colspan="2" style="border-collapse: collapse;">&nbsp;</td> 
    </tr> 
</table>