0

I have a table that will have its rows coloured with a liner-gradient background image, this works fine in Firefox and Chrome - but not in IE / Edge. As you can see in the linked JSFiddle below, a gradient works in a simple div element in IE - but not when applied to a table row element.

Example of linear background:

.gradient {
 background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%); 
}

Here's a JSFiddle of what I'm trying to accomplish: https://jsfiddle.net/q9jkoa52/

I've came across similar questions on a few platforms but all proposed fixes I have not seen work, or can not get to work myself. Even opening 'fixed' JSFiddles in IE, isn't actually fixed.

Is there a way to get this to work?

Callum Luke Vernon
  • 275
  • 2
  • 3
  • 16
  • Possible duplicate of [Gradient not working in IE 10/11](https://stackoverflow.com/questions/20843293/gradient-not-working-in-ie-10-11) – kevin b. May 31 '17 at 14:19
  • 1
    Possible duplicate of [How do I get my CSS linear gradient to work in IE?](https://stackoverflow.com/questions/10924632/how-do-i-get-my-css-linear-gradient-to-work-in-ie) – Carl0s1z May 31 '17 at 14:20
  • @kevinb. @C Travel I should expand my point, all other answers / fixes I've found I cannot seem to get to work. I will update the original post. In addition those questions proposed are about getting gradient to work in IE, it works as demonstrated in the JSFiddle - just not when applied to a table row element – Callum Luke Vernon May 31 '17 at 14:23
  • So how about [this question](https://stackoverflow.com/questions/8980712/can-you-put-a-gradient-on-a-table-row-in-ie)? – kevin b. May 31 '17 at 14:38
  • @kevinb. Tried the proposed solution in JSFiddle here: https://jsfiddle.net/k1scz9a4/ and still does not work. – Callum Luke Vernon May 31 '17 at 14:46

2 Answers2

3

After many fiddling, I came to this result, hope it helps (note the different gradient CSS rules; you need to play around with the values according to your preferences; also: only tested in IE):

.gradient {
 background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); 
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.gradientRow {
 background-image: linear-gradient(210deg, #FFF133 51%, #16D611 61%, #00A3EF 67%); 
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.solid {
  background-color: aqua;
}
.box {
  width:200px;
 height:200px;
}
table, tr, td, th {
  border: 2px solid black
}
<div class="gradient box"></div>
<table>
<thead>
  <tr>
    <th style="width:20%;">Column 1</th>
    <th style="width:50%;">Column 2</th>
    <th style="width:30%;">Column 3</th>
  </tr>
</thead>
<tbody>
  <tr class="solid"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr class="gradient"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>
kevin b.
  • 1,494
  • 1
  • 13
  • 23
  • Thanks, Kevin, I was fiddling around with the gradients I require to use - and all is now working fine. An important note is that the supplied percentage widths are not a width of the row or table, but the width of the page? https://jsfiddle.net/5fzy6v19/1/ – Callum Luke Vernon Jun 01 '17 at 07:33
  • No problem, glad I could guide you to a working solution. The exact explaination however, I can't really give you an answer to that since I'm not yet experienced enough in this topic. Some searching for 'linear-gradient CSS' could probably provide more clarification. – kevin b. Jun 01 '17 at 07:49
2

if you leave only background-attachment: fixed; it works fine

.gradient {
 background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); 
    background-attachment: fixed;
}

and should set table width=100%

slima4
  • 21
  • 2