CODEWITHSUNDEEP
imagehtml-tablepngtransparent
unebune
unebune

Reputation: 43

Table rowspan transparent image

I have a problem with my table. I want an image with a transparent background in the top right corner of a newsletter. Here's the code:

<table>
    <tr>
        <td>
            <img src="header.png" alt="header" class="headerImg" />
        </td>
        <td rowspan="3">
            <img src="circle.png" alt="header" class="rightHeaderImg" />
        </td>
    </tr>
    <tr>   
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

The problem seems to be with the rowspan, but I just think it's weird that I have a .png image with transparent background, and when it's shown in the td its background color is solid.

Upvotes: 2

Views: 2544

Answers (2)

Mr Lister
Mr Lister

Reputation: 46579

If you want the image to overlap the row below it, you can do that by having the image overflow out of the td, not by giving the td a rowspan.

So the solution becomes something like this

<table style="background:purple; border-spacing:0; height:112px">
  <tr>
    <td>top</td>
    <td>top</td>
    <td style="vertical-align:top">
      <div style="height:0;"><img src="circle.png" alt=""></div>
    </td>
  </tr>
  <tr style="background:#999">
    <td>bottom</td>
    <td>bottom</td>
    <td><!--empty--></td>
  </tr>
</table>

and look like this

enter image description here

Note that you need an extra div inside the td with the image, otherwise the td would expand vertically to be as high as the image (even if you were to set its height to 0 explicitly; that wouldn't help). Also note that you'll need to give the table an explicit height, otherwise it won't know how hight it needs to be to accommodate the overflowed image.

JSFiddle

Upvotes: 2

unebune
unebune

Reputation: 43

Ok so this is what I want it to do:

<table border="1">
  <tr style="background:purple;">
    <td>top</td>
    <td>top</td>
    <td rowspan="2"><img src="circle.png" alt="header"/></td>
  </tr>
  <tr style="background:#999">
    <td>bottom</td>
    <!-- room for td above -->
    <td>bottom</td>
  </tr>
</table>

I want the circle image in some sort of way to have its td be transparent, so that the color of both the purple tr and gray tr shows behind the image. It shouldn't be solved using divs og positioned elements.

enter image description here

Upvotes: 0

Related Questions