CODEWITHSUNDEEP
htmlcssoutlookhtml-emailoutlook-2010
Kristen Grote
Kristen Grote

Reputation: 2777

Extra Spacing Between Rows in Outlook 2010

I'm using a table to fake a bulleted list in my HTML email. It looks great in every client except Outlook 2010, which adds extra white space between each row:

correct vs outlook

The table cellpadding and cellspacing is set to 0 and I tried explicitly setting the line-height in each table row.

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

Upvotes: 2

Views: 1990

Answers (2)

Jay Chow
Jay Chow

Reputation: 1

“Remove the bottom margin” does not work for me. I ended up adding a blank row as the last row like this:

<tr>
   <td style="height:0;font-size:0;line-height:0;">&nbsp;</td>
</tr>

Upvotes: 0

Kristen Grote
Kristen Grote

Reputation: 2777

The problem is the margin-bottom style applied to the parent table. Outlook applies that style to the child elements so each td has a bottom margin of 21px. Remove the bottom margin and use a blank table row to fake a bottom margin instead:

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

Upvotes: 1

Related Questions