Zusätzlicher Abstand zwischen Zeilen in Outlook 2010

Question

Ich verwende eine Tabelle, um eine Aufzählung in meiner HTML-E-Mail zu fälschen. Es sieht gut aus in jedem Client mit Ausnahme von Outlook 2010, die zwischen jeder Zeile Extra Leerzeichen ergänzt:

Die Tabelle cellpadding und cellspacing auf 0 gesetzt ist und ich versuchte Einstellung explizit die line-height in jeder Tabellenzeile.

Der 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

Das Problem ist der margin-bottom Stil auf die table Eltern angewandt. Outlook wendet diesen Stil auf die untergeordneten Elemente an, sodass jeder td einen unteren Rand von hat. Entfernen Sie den unteren Rand und verwenden Sie eine leere Tabellenzeile, um stattdessen einen unteren Rand zu fälschen:

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