CSS/WebKit: Background Images for Table Row

css, google-chrome, html-table, safari, webkit

Solution

Will your table always only have two 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 one 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.

Problem

For some reason, when you apply a background image to a tr in Safari and Chrome, it renders it as if the rule applies to every td. Firefox: (Source: whyprime.com) Safari: (Source: whyprime.com) I found this article discussing a fix: Applying a background image to a table row I was able to get it working in Internet Explorer with spacer GIF images, but I can't figure it out for Safari. http://www.whyprime.com/temp/table-background.html

Original source