place background image outside of a <table> <td> <tr> borders in embedded html mail

Question

Hi,

Looking through some html email examples, I noticed is all about tables. I wanted an image inside of one of the rows of the main table to look like half of the image is outside the table and the other half inside. I can't get the solution to do that.

Any helps would be appreciated, really appreciated Here's is what I like.

The orange thin line would be the table border I got it working int the webpage where I can use divs and a lot of stylesheet but in html embedded in email haven't found the way. As you can see there's text and images above the image

Answer 1

I'm afraid this can't be done: A background image will span only as far as the element it is in, no further.

You may be able to do something with a huge, invisible cell that makes your table extend beyond the visible data.

Answer 2

Here, I managed to create a simple example:

 +--------+--------+--------+
 | TEXT GOES HERE  |        |
 |                 | empty  |
 |                 |        |
 |        +--------+--------+
 |        |                 |
 |        | IMAGE GOES HERE |
 |        |                 |
 +--------+-----------------+

What you're basically doing is:

• Create a table with three columns (actually there are only 2 <td>s)
• For text: Use <td colspan="2">text</td> <td></td>
• For an image: Use <td>maybe text here</td> <td colspan="2"> <img/> </td>

Live example on jsFiddle (updated, it includes borders now)