CSS 将单个背景渐变应用于表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14371846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying a single background gradient to a table row
提问by Andrew
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:
是否可以有一个跨越整个表格行的背景渐变？我只能将背景应用于单个表格单元格，即使我特别想防止这种情况。这是一个针对 jsfiddle 上的 Webkit 的简化示例：
As you can see, I am using border-collapse:collapseand I am specifying background:transparentfor 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.
正如你所看到的，我使用border-collapse:collapse，我指定background:transparent了<tr>和<th>子元素，但重复每个单元格的红色渐变到左边。我也尝试将背景应用到<tr>，但结果与您现在看到的相同。
To view the code without going to jsfiddle, here it is:
要在不去jsfiddle的情况下查看代码，这里是：
html
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
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; }
回答by jekcom
set background-attachment:fixed;on thead and it will work fine
设置background-attachment:fixed;在顶部，它会正常工作
回答by Moises Garcia
I think there is a better solution to these:
我认为有更好的解决方案：
- Apply the gradient background to the whole table.
- Then apply a solid background for thead and tfooter.
- 将渐变背景应用于整个表格。
- 然后为 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;
}
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;
}
Take a look: http://jsfiddle.net/5brPL/
回答by Slyy
I have found myself testing the brand new repeating-linear-gradient, which apparently works for <tr>elements (I have only tested in Google Chrome though).
我发现自己在测试全新的repeating-linear-gradient，它显然适用于<tr>元素（不过我只在 Google Chrome 中测试过）。
The trick is to provide the widest repeating pattern, so that... it does not repeat.
诀窍是提供最宽的重复模式，这样......它就不会重复。
Try this:
尝试这个：
tr {
background: repeating-linear-gradient(
45deg,
red 0%,
blue 100%
);
}
回答by matthewpavkov
Not the prettiest solution, but it does do the trick. You just set up each thto have 25% of the color range. The example below uses a color range from 0 to 255.
不是最漂亮的解决方案，但确实可以解决问题。您只需将每个设置th为具有 25% 的颜色范围。下面的示例使用从 0 到 255 的颜色范围。
Same HTML that you already have. Here's the CSS:
与您已有的 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%);
}
I found this issue on Google: http://code.google.com/p/chromium/issues/detail?id=122988but there is no solution.
我在 Google 上发现了这个问题：http: //code.google.com/p/chromium/issues/detail?id=122988但没有解决方案。
Firefox does not have this issue (didn't check any other browsers):
http://jsfiddle.net/cGV47/4/
Firefox 没有这个问题（没有检查任何其他浏览器）：http:
//jsfiddle.net/cGV47/4/
