Placing an image over table border-top in a newsletter - html

Question

I've designed a newsletter template and there is a detail I'd like to add. As a divider between two tables/content blocks, I'd like to add an arrow that points towards the coming table. I've added a border-top with color to the table and at the center I'd like the arrow(image) to break the border, but I can only get the image to align to the top not overlap it, which is what I ideally would like to do.
The tables have different background color which span the whole viewport, the divider should do the same. The layout is also responsive.
Here is the code I've used. Is what I'm asking even possible in a newsletter in terms of restrictions and compatibility?
Here is my result:
http://jsfiddle.net/qyzq4bvb/
This is what I'm trying to do:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td align="center" valign="top">
<img src="http://img.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
#divider{border-top:3px solid; border-color:#63A700; width:100%; background-color:inherit;}

Answer 1

You could try using position: relative on your img as shown below.
You may need to make minor adjustments to your image to clean up the left/right edges for a more seamless overlay. A .png file might work better since the .jpg's color does not quite look right (compression?). However, the idea will work.
You may need to add a white top border to the image. Be aware that this type of pixel precision positioning may be sensitive to cross-browser effects.
#divider {
border-top: 3px solid;
border-color: #63A700;
width: 100%;
background-color: inherit;
}
#divider td {
text-align: center;
}
#divider td img {
display: inline-block;
position: relative;
top: -4px;
border-top: 1px solid white;
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td>
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/arrow.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>