Outlook 2010の行間余分なスペース

Question

テーブルを使用してHTML電子メールで箇条書きリストを偽装しています。テーブルcellpaddingとcellspacingが0に設定し、私は明示的に各表の行にline-heightを設定しようとした

：それは、各行の間に余分な空白が追加されますOutlook 2010では、除くすべてのクライアントに素晴らしいです。

コード：

<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

問題は親tableに適用margin-bottomスタイルです。 Outlookはそのスタイルを子要素に適用し、各tdの下余白は21pxです。下の余白を削除し、代わりに偽の下の余白に空白のテーブルの行を使用します。Outlookのことを聞いた

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