Menu
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...
588
Tables and table cells don't use the min-height property, setting their height will be the min-height as tables will expand if the content stretches them. Show activity on this post. Simply use the css entry of min-height to one of the cells of your table row. Works on old browsers too.
Conversation. CSS tip: To reset a min-height or min-width declaration, set it to "0", not "auto". For max-height/width, the initial value is "none". Also see nimbupani.com/safe-css-defau…
To change the height, do one of the following: To make all rows in the table the same height, select Layout > Distribute Rows. To make all the columns in the table the same height, select Layout > Distribute Columns. Note: In Excel, select Home > Format, and then select Row Height.
Defines the min-height as an absolute value. <percentage> Defines the min-height as a percentage of the containing block's height. auto. The browser will calculate and select a min-height for the specified element.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
