2

I'd like to have a diagonal gradient as the background for table rows. It works fine in Firefox, but in Chrome the gradient is applied to each individual <td>. Is there a way or some workaround to get it to work?

Here's a Fiddle to demonstrate.

Here's an image of the difference.

Brett38
  • 55
  • 1
  • 5
  • 1
    This might be related: https://bugs.webkit.org/show_bug.cgi?id=34392 – showdev Sep 08 '14 at 18:12
  • 1
    possible duplicate of [How to make repeating-linear-gradient for a table continue seamlessly over multiple cells?](http://stackoverflow.com/questions/25625216/how-to-make-repeating-linear-gradient-for-a-table-continue-seamlessly-over-multi) – Niels Keurentjes Sep 08 '14 at 18:15
  • That question also contains a usable workaround. – Niels Keurentjes Sep 08 '14 at 18:16

1 Answers1

2

I ran into this same issue some time ago... Only solution I found was to make the tr a display:block. It works, though it can cause some layout issues...

http://jsfiddle.net/p3s3zLja/4/

tr {
    color: white;
    background: linear-gradient(to bottom right, blue, red);
    position: relative;
    display: block;
}
LcSalazar
  • 16,524
  • 3
  • 37
  • 69