Remove table cell spacing in Outlook 2010

Question

Looking to use a table in simulate bulleted lists in an HTML e-mail. The code below works well in all clients except Outlook 2010 and 2013.

We used line-height with other CSS to remove all cell spacing. However, in Outlook 2010 the line-height declarations are ignored and default (increased) spacing is shown.

Does anyone know if there is any CSS solutions to make Outlook respect the line-height?

<table style="border-collapse:collapse; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px; padding-top: 0px;" border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tbody>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; margin: 0px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; padding-bottom: 0px;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; padding-bottom: 0px; margin: 0px; line-height: 18px;">A</td>
                          </tr>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; margin: 0px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; margin: 0px; line-height: 18px;">B</td>
                          </tr>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; margin: 0px;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; margin: 0px; line-height: 18px;">C</td>
                            </tr>
                        </tbody>
                    </table>

Answer 1

Solution

Generally speaking, this isn't a reasonable way to customize the size of bullets in a list, because there are side effects in Outlook 2007 and up (described below). However, in this particular case, using Arial instead of Trebuchet MS for the bullet characters may be an adequate solution.

<table style="font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px;" border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">A</td>
        </tr>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">B</td>
        </tr>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; margin: 0px; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">C</td>
        </tr>
    </tbody>
</table>

Explanation

The use of font-size:16px for the bullet characters is forcing Outlook 2007 and up to render each line with at least 22px of height, no matter what the specified line-height is. When I reduced the font-size of the bullets to 13px, the lines were rendered at a height of 18px. If the font-size is increased to 20px, the rendered line height is 26px.

This appears to be how much height Outlook 2007 and up requires to render the full set of possible text characters at these font sizes (even if the bullet character itself doesn't use most of the height available). The numbers vary based on the font-family used.

Arial

font-size    minimum line-height     difference
   10               13                  +3
   11               14                  +3
   12               15                  +3
   16               18                  +2
   20               23                  +3
   30               35                  +5
   60               67                  +7

Trebuchet MS

font-size    minimum line-height    difference
   10               15                  +5
   11               16                  +5
   12               18                  +6
   16               22                  +6
   20               26                  +6
   30               38                  +8
   60               76                  +16

Related Info

For HTML tables, specify the width and height using HTML attributes rather than CSS styles. Modern versions of Outlook ignore width and height styles.

In some cases, adding a line-height style (and possibly an HTML height attribute) to the table cells will help enforce the desired line-height.

Partial list of features not supported by Outlook.

Answer 2

You cannot get line-height to work in outlook. However what you can do is to break your table in respective columns, Means that there is no need to have a • inside a span. rather than create a td that will hold •. You can there use the table property v-align:top/middle/bottom; to get the list items lined up properly. This way there is no need to use line-height property.