Css 对表格行应用单个背景渐变

有可能有一个跨越整个表格行的背景渐变吗？我只能将背景应用于单个表单元格，即使我特别试图阻止这样做。下面是一个以JSFIDLE上的Webkit为目标的简化示例：

如您所见，我正在使用

边框折叠：折叠

，并且我正在为

和

子元素指定

背景：透明

，但是对于每个表单元格，左侧的红色渐变会重复。我也尝试过将背景应用于

，但结果与您现在看到的相同

要查看代码而不转到JSFIDLE，请参见：

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>

---

这不是最漂亮的解决方案，但它确实起到了作用。您只需将每个

th

设置为具有25%的颜色范围。下面的示例使用的颜色范围为0到255

与您已有的HTML相同。以下是CSS：

table { width:100%; }

th {
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, 
                                              rgba(191,191,191,1) 100%);
}
th + th {
    background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%, 
                                              rgba(128,128,128,1) 100%);
}
th + th + th {
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%, 
                                              rgba(64,64,64,1) 100%);
}
th + th + th + th {
    background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%, 
                                              rgba(0,0,0,1) 100%);
}

我在谷歌上发现了这个问题：但没有解决方案

Firefox没有此问题（未检查任何其他浏览器）：

---

不是最漂亮的解决方案，但它确实起到了作用。您只需将每个

th

设置为具有25%的颜色范围。下面的示例使用的颜色范围为0到255

与您已有的HTML相同。以下是CSS：

table { width:100%; }

th {
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, 
                                              rgba(191,191,191,1) 100%);
}
th + th {
    background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%, 
                                              rgba(128,128,128,1) 100%);
}
th + th + th {
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%, 
                                              rgba(64,64,64,1) 100%);
}
th + th + th + th {
    background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%, 
                                              rgba(0,0,0,1) 100%);
}

我在谷歌上发现了这个问题：但没有解决方案

Firefox没有此问题（未检查任何其他浏览器）：

---

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

• 将渐变背景应用于整个表格
• 然后为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;
}

看一看:

---

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

• 将渐变背景应用于整个表格
• 然后为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;
}

看一看:

---

设置

背景附件：固定在AD上，它将正常工作

设置
背景附件：固定在AD上，它将正常工作

我发现自己正在测试全新的
重复线性渐变
，它显然适用于
元素（不过我只在谷歌Chrome上测试过）

诀窍是提供最宽的重复模式，以便。。。它不会重复

试试这个：

tr {
    background: repeating-linear-gradient(
        45deg,
        red 0%,
        blue 100%
    );
}

我发现自己正在测试全新的
重复线性渐变
，它显然适用于
元素（不过我只在谷歌Chrome上测试过）

诀窍是提供最宽的重复模式，以便。。。它不会重复

试试这个：

tr {
    background: repeating-linear-gradient(
        45deg,
        red 0%,
        blue 100%
    );
}

我可以确认，在chrome 33中，这种情况仍在发生。chromiumi中有一个记录在案的bug，我可以确认Chrome33中仍然存在这种情况。这是一个记录在案的Chromium bug这个问题太老了，它上面有胡须，但这个解决方案确实很有效。谢谢@jekcom.以防它对其他人有帮助：这对我很有用（将其应用于.highlight行而不是thead）；然而，我奇怪地需要添加一个！背景附件的重要标志，以使其正常工作。将标志添加到背景规则中也会再次破坏该行为。我也看不出背后的原因。我知道这是几年后的事了，但这对Edge也起了作用。。。微软浏览器是怎么回事。。。谢谢你的提示！这个解决方案似乎对我不起作用。答案中的小提琴似乎和问题中的小提琴产生了相同的结果。你能帮我吗？我有一个问题，这个问题太老了，有胡子在上面，但这个解决方案确实很有效。谢谢@jekcom.以防它对其他人有帮助：这对我很有用（将其应用于.highlight行而不是thead）；然而，我奇怪地需要添加一个！背景附件的重要标志，以使其正常工作。将标志添加到背景规则中也会再次破坏该行为。我也看不出背后的原因。我知道这是几年后的事了，但这对Edge也起了作用。。。微软浏览器是怎么回事。。。谢谢你的提示！这个解决方案似乎对我不起作用。答案中的小提琴似乎和问题中的小提琴产生了相同的结果。你能帮我吗？我有个问题