将单个背景渐变应用于表格行

Question

是否可以有一个跨越整个表行的背景渐变？我只能将背景应用于单个表格单元格,即使我专门试图阻止它.这是一个针对jsfiddle上的Webkit的简化示例:

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

正如你所看到的,我使用border-collapse:collapse,我指定background:transparent了<tr>和<th>子元素,但重复每个单元格的红色渐变到左边.我已经尝试将背景应用于<tr>同样的,但结果与您现在看到的结果相同.

要查看代码而不使用jsfiddle,这里是:

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

设置background-attachment:fixed;在thead上它会正常工作

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

Answer 2

我认为有更好的解决方案:

• 将渐变背景应用于整个表格.
• 然后为thead和tfooter应用一个坚实的背景.

table { border:0; border-collapse:collapse;
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(108,211,229,0.2) 40%, rgba(108,211,229,0.2) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(108,211,229,0.2)), color-stop(60%,rgba(108,211,229,0.2)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */            
}

table thead, tfoot {
    background: #fff;
}

看看:http: //jsfiddle.net/5brPL/