title: CSS3 linear-gradient that spans over table row
body: <p>I'm trying to use <code>linear-gradient</code> to make a progress bar out of a table row. I'm applying the style to the row but it acts as if set to each of the cells in the row instead. How would I do this right?</p>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr style="background: linear-gradient(to right, #FF0000 35%, #FFF 35%)"&gt;
        &lt;td&gt;Column1&lt;/td&gt;
        &lt;td&gt;Column2&lt;/td&gt;
        &lt;td&gt;Column3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Fiddle:</strong>
  <a href="https://jsfiddle.net/b4y2nue9/" rel="nofollow noreferrer">https://jsfiddle.net/b4y2nue9/</a></p>