html - 是否可以在多个表格行上设置一个线性渐变背景？

Question

我需要为表中的 3 个连续行设置单个线性渐变背景:

<table>
  <tbody>
    <tr><td>1</td></tr>
    <!-- background starts here -->
    <tr class="bg"><td>2</td></tr>
    <tr class="bg"><td>3</td></tr>
    <tr class="bg"><td>4</td></tr>
    <!-- background ends here -->
    <tr><td>4</td></tr>
  </tbody>
</table>

我现在拥有的是每行一个渐变:http://jsfiddle.net/orkLLbpz/ 。有什么想法如何从这里开始吗？

请注意，表中的所有行都在 tbody 元素中，因此我无法使用另一个 tbody 对这些行进行分组。

Answer 1

我认为这是不可能的，我在元素中也有相同的要求。

我所做的:使用像这样的CSS技巧

.bg1 {
  background: linear-gradient(to bottom, #FFF 0%, #f7f6f6 100%) repeat scroll 0% 0% transparent;
}
.bg2 {
  background: linear-gradient(to bottom, #f7f6f6 0%, #f4f4f4 100%) repeat scroll 0% 0% transparent;
}
.bg3 {
  background: linear-gradient(to bottom, #f4f4f4 0%, #EEE 100%) repeat scroll 0% 0% transparent;
}

<强> Updated Jsfiddle

这不是一个正确的答案，但可能适合您。