将单个背景渐变应用于表行 [英] Applying a single background gradient to a table row

问题描述

有可能有一个跨越整个表行的背景渐变吗？我只能应用背景到单个表单元格，即使我特别试图阻止这一点。下面是一个针对webkit在jsfiddle上的示例：

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/

如您所见，我使用 border-collapse：collapse 和我为< tr> 和指定 background：transparent < th> 子元素，但是对于每个表单元格重复左侧的红色渐变。我已经尝试应用背景到< tr> ，但与现在看到的结果相同。

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.

要查看代码，而不转到jsfiddle，这里是：

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

推荐答案

set background-attachment ：fixed; 在thead上，它会正常工作

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

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

这篇关于将单个背景渐变应用于表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！