Email template boilerplate - unable to set row height

Question

I'm using this boilerplate: http://htmlemailboilerplate.com/

I want a table row to be 6px of height and one row to be 1px of height. No matter what I try the table rows wont go less than a height of 15px. Coincidently 15px is the font-size.

Code:

...
<tr>
    <td height="6" style="height: 6px;">&nbsp;</td>
</tr>
<tr>
    <td height="1" style="height: 1px;"><img src="images/bar.gif" width="220" height="1" /></td>
</tr>
...

Any way I can get this table rows to be the height I want?

Answer 1

Did you try using CSS to set line-height:1px on your td?

Answer 2

I dont know if they have changed the rules for Outlook 2013 recently, but I found that setting line height and font size on the TD didnt work. I even tried setting it on the TR, that didnt work either.

I put a & nbsp; in the cell and set its font size to 0px as well as putting line height and font size on the TD just to make doubly sure. That seems to have worked for me.

The example below has a 2px green cell - tested in litmus and "real" 2013. Hope this helps!

 <table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="20" bgcolor="#0000CC"></td>
  </tr>
  <tr>
    <td height="2" bgcolor="#00FF00" style="line-height:0px; font-size:0px;"><font style="font-size:0px; -webkit-text-size-adjust: none;">&nbsp;</font></td>
  </tr>
  <tr>
    <td height="20" bgcolor="#0000CC"></td>
  </tr>
</table>

Answer 3

I needed to add

table td { mso-line-height-rule: exactly; }

to make it work in Outlook 2013.

Answer 4

Table cells will expand to hold the content you put in them, no matter what height you set them to be.

The non-breaking space will be the height of a line. You need to wrap it like this:

<span style="line-height:1px;font-size:1px;">&nbsp</span>

Similarly, the cell with the image will be at least as tall as bar.gif

Answer 5

I use line-height and font-size (if smaller than the current) with a   (space) -

<table width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
       <td style="line-height:5px; font-size:5px;">&nbsp;</td>
    </tr>
</table>

Or if inline -

<span style="line-height:5px; font-size:5px;"><br /><br /></span>