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;"> </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?
Did you try using CSS to set line-height:1px on your td?
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;"> </font></td>
</tr>
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
</table>
I needed to add
table td { mso-line-height-rule: exactly; }
to make it work in Outlook 2013.
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;"> </span>
Similarly, the cell with the image will be at least as tall as bar.gif
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;"> </td>
</tr>
</table>
Or if inline -
<span style="line-height:5px; font-size:5px;"><br /><br /></span>
Related
I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:
[EDIT now codel looks like this]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
<tr class="preheader" width="100%" style="background-color:#d8ebf6;">
<td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
</tr>
</table>
DEMO
Maybe some ideas why this happens or how to solve the issue?
Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space and this will look empty but satisfy outlooks desire to always be awkward.
So I wanted to share the solution I found which works fine both in outlook and common email inboxes:
Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char , because otherwise outlook was making two lines instead of intended one line.
Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.
Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
<tr class="preheader" style="background-color:#d8ebf6;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
<tr>
<td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
I have a problem with dynamic height of the table cell. I've set it to rowspan=2 so it should take 2 rows for it's height.
My code:
<table cellspacing="0" cellpadding="0" style="width: 640px;" align="center">
<tr>
<td colspan="3"><img src="bg-top.png" /></td>
</tr>
<tr style="height: 669px;">
<td><img src="bg-left.png" style="display: block"/></td>
<td valign="top" rowspan=2 >
lorem ipsu
</td>
<td><img align="right" src="bg-right.png" style="display: block"/></td>
</tr>
<tr>
<td background="cont.png"></td>
<td background="cont.png"></td>
</tr>
</table>
I'm trying to make images look like a border around the text, and if text is longer than what can be put in 700px than it should repeat cont.png. It looks fine in Opera and Chrome but in IE and Firefox it's not working.
Screnshots:
in mozzila: http://shrani.si/f/1h/12j/3c72q2gv/notworking.png
in chrome: http://shrani.si/f/Q/n/3w7G0jOn/working.png
Any ideas what I might change?
I would convert this to use CSS instead.
I'v got it to work! U used only one row and set background picture to it and then set my left and right on top of it, and set it with valing=top. Now it works evrywhere except in outlook :S
I want to design a table with height and width of 1px.
Is this possible, cause I couldn't do that?
Any advice would be appreciated.
EDIT:
I did it, actually I needed to use !important in my css style, but the space between cells are present. How should I remove them?
<table width="100%" style="height:1px !important;">
<tr style="height:1px !important;">
<td style="background-color:red; width:1px;">
</td>
<td style="background-color:blue; width:1px;">
</td>
<td style="background-color:orange;">
</td>
<td style="background-color:red; width:1px;">
</td>
</tr>
</table>
This is an HTML-only answer that works across browsers and settings:
<body>
<table cellpadding=0 cellspacing=0>
<tr><td width=1 height=1></td></tr>
</table>
To set the color of the pixel, you can use the bgcolor attribute on the td element.
I can’t imagine what your purpose is, but this answers the question that was asked.
Yes you can just take a look at this Fiddle:
http://jsfiddle.net/yaAJ7/
It is better practice to use DIV's though rather than tables