CODEWITHSUNDEEP
htmlcsshtml-email
gvalero87
gvalero87

Reputation: 875

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

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.

alt text 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

Upvotes: 0

Views: 1735

Answers (2)

Harmen
Harmen

Reputation: 22438

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)

Upvotes: 1

Pekka
Pekka

Reputation: 449395

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.

Upvotes: 0

Related Questions