title: Applying a single background gradient to a table row
body: <p>Is it possible to have a background gradient that spans an entire table row? I'm only able to apply the background to individual table cells, even when I'm specifically trying to prevent that. Here is a boiled-down sample that targets Webkit on jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/cGV47/2/">http://jsfiddle.net/cGV47/2/</a></p>
  
  <p>As you can see, I am using <code>border-collapse:collapse</code> and I am specifying <code>background:transparent</code> for the <code>&lt;tr&gt;</code> and <code>&lt;th&gt;</code> child elements, yet the red gradient to the left is repeated for each table cell. I've tried applying the background to the <code>&lt;tr&gt;</code> as well, but with the same result as you see now.</p>
  
  <p>To view the code without going to jsfiddle, here it is:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;One&lt;/th&gt;
              &lt;th&gt;Two&lt;/th&gt;
              &lt;th&gt;Three&lt;/th&gt;
              &lt;th&gt;Four&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;un&lt;/td&gt;
              &lt;td&gt;deux&lt;/td&gt;
              &lt;td&gt;trois&lt;/td&gt;
              &lt;td&gt;quatre&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>* {margin:0;padding:0;border:0;border-collapse:collapse;}
  table { width:100%; }
  thead { background: -webkit-linear-gradient(left, rgba(222,22,22,1) 0%, rgba(222,222,222,0) 20%, rgba(222,222,222,0) 80%, rgba(222,222,222,1) 100%); }
  thead tr, thead th { background:transparent; }
  </code></pre>