How to force min-height on table

Question

I have this code :

<table cellspacing="0" cellpadding="0" border="0" style="width:415px">     <tbody>         <tr valign="top">             <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">                 This is my text that I need in 2 lines             </td>         </tr>          <tr valign="top">             <td style="font-size:12px;line-height:14px">                 Second Line             </td>         </tr>     </tbody> </table> 

As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.

For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).

So, how can I take the whole height on the td trought min-height?

Also, tried putting min-height:60px; on tr, but nothing change...

Answer 1

min-height doesn't work for table elements:

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

I can only assume this applies to td and tr as well.

What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:

 <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">             <div style="min-height: 60px; background-color: green">             This is my text that I need in 2 lines             </div>         </td> 

Edit: You say this doesn't work with Outlook.

Alternative idea: Place a 60 px tall image in the td, and make it float: left:

<td>   <img src="..." style="float: left"> </td>