Applying a single background gradient to a table row

Question

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:

http://jsfiddle.net/cGV47/2/

As you can see, I am using border-collapse:collapse and I am specifying background:transparent for the <tr> and <th> child elements, yet the red gradient to the left is repeated for each table cell. I've tried applying the background to the <tr> as well, but with the same result as you see now.

To view the code without going to jsfiddle, here it is:

html

<table>     <thead>         <tr>             <th>One</th>             <th>Two</th>             <th>Three</th>             <th>Four</th>         </tr>     </thead>     <tbody>         <tr>             <td>un</td>             <td>deux</td>             <td>trois</td>             <td>quatre</td>         </tr>     </tbody> </table> 

css

* {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; } 

Answer 1

set background-attachment:fixed; on thead and it will work fine

http://jsfiddle.net/cGV47/64/