开发者

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

开发者 https://www.devze.com 2023-01-22 06:15 出处:网络
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

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.

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

The orange thin line would be the table border I got 开发者_如何学Cit 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


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)


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消