CSS/WebKit: Background Images for Table Row

Question

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

Solution 1

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.

Solution 2

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!

Solution 3

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.

Comments

[Jason Keene]

Ah I suppose that would be the way you'd traditionally would do background images for a table. It's been so long since I've had to seriously style up a table w/ sliced backgrounds and all that I didn't even think of that. I was able to mitigate the display issues in Webkit browsers by positioning the background with x/y values but in the future this will be the route I'll take and just use javascript dynamically apply the appropriate background styles to keep the markup clean and simple. I'll mark as answered for the good advice and functional solution. Thanks bro!

[Jamie]

Thanks perfect fix for me with an addition of the webkit @media CSS hack. '@media screen and (-webkit-min-device-pixel-ratio:0) { tr {display: block;} td {display: inline-block;width:195px } }'

[php.khan]

Thanks your solution rocks on we css, it save lot of my time.

[yunzen]

Ever scrolled with this? It's kinda funny

[Peter]

Thanks for Your idea. I spent 1 week on looking for good solution gradient background tr table. Thank You.

[thouliha]

This saved my fkn life. I LOVE YOU.

[mga]

this should be marked as the answer since it does not rely on workarounds

[Justin Wignall]

This fixes the image to the background of the page, not the table row. So would work for e.g. a repeating pattern that has no specific start or end but not for any background that needs to be aligned to the table itself