CODEWITHSUNDEEP
cssgoogle-chromesafariwebkithtml-table
Jason Keene
Jason Keene

Reputation: 1125

CSS/WebKit: Background Images for Table Row

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:

Firefox

(Source: whyprime.com)

Safari:

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

Upvotes: 7

Views: 13257

Answers (3)

YellowMart
YellowMart

Reputation: 221

You can use "background-attachment : fixed" to solve this problem.

<table>
  <tr class="bg">
    <td></td>
    <td></td>
  </tr>
</table>

And in CSS

tr.bg {
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px;
    background-attachment: fixed;
}

And it works!

Upvotes: 16

KP.
KP.

Reputation: 13730

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.

Upvotes: 3

Slavyansk on Kuban
Slavyansk on Kuban

Reputation: 89

By default, the TR and TD have display properties table-cell and table-row. We need them to forget about it and feel like simple block elements:

tr {display: block;}
td {display: inline-block; background: transparent;}

This code solved the problem of rendering for me.

Upvotes: 8

Related Questions