28

是否可以有一个跨越整个表格行的背景渐变？我只能将背景应用于单个表格单元格，即使我特别试图阻止这种情况。这是一个针对 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; }
4

4 回答 4

40

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

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

于 2014-08-14T13:33:17.183 回答
6

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

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

于 2014-01-31T10:58:55.240 回答
2

我发现自己正在测试全新的repeating-linear-gradient，这显然适用于<tr>元素（虽然我只在 Google Chrome 中测试过）。

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

试试这个：

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

http://jsfiddle.net/slyy/2pzwws0d/

于 2017-08-14T10:24:50.417 回答
0

不是最漂亮的解决方案，但确实可以解决问题。您只需将每个设置th为具有 25% 的颜色范围。下面的示例使用从 0 到 255 的颜色范围。

http://jsfiddle.net/cGV47/3/

您已经拥有的相同 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%);
}

我在 Google 上发现了这个问题：http ://code.google.com/p/chromium/issues/detail?id=122988但没有解决方案。

Firefox 没有这个问题（没有检查任何其他浏览器）：http:
//jsfiddle.net/cGV47/4/

于 2013-01-17T04:15:20.253 回答