CSS/Webkit: Background Images for Table Row

Question

For some reason when you apply a background image to a tr in Safari/Chrome it renders it as if the rule applies to every td.

Firefox:

Safari:

I found this article discussing a fix:

http://snook.ca/archives/html%5Fand%5Fcss/applying%5Fa%5Fback

I was able to get it working in IE with spacer gifs but can't figure it out for Safari.

http://www.whyprime.com/temp/table-background.html

Answer 1

Will your table always only have 2 rows? Such as:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

If so, a simple but not overly elegant solution would be to split your background image into two images, and apply a CSS class to the left and right column, applying half of the arrow to the right side of the left column, and to the left side of the right column:

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

Your CSS could then be similar to:

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

You could also use a sprite image where you use 1 image and position it differently for the two backgrounds.

I realize it's probably not the most ideal solution but it would at least fix your issue and get your project moving. I sometimes use simple solutions such as this in order to make forward progress, and then revisit the problem to make it more efficient later.

Hope this helps!