Question

您可以在此处查看问题：http://jsfiddle.net/vadirn/5pgXS/1/（仅使用-webkit-gradient）。

HTML：

<table>
  <tr>
    <td>Row one, column one</td>
    <td>Row one, column two</td>
    <td>Row one, column three</td>
  </tr>
  <tr>
    <td>Row two, column one</td>
    <td>Row two, column two</td>
    <td>Row two, column three</td>
  </tr>
  <tr>
    <td>Row three, column one</td>
    <td>Row three, column two</td>
    <td>Row three, column three</td>
  </tr>
</table>

SCSS：

$solid: 1px solid #444;
table {
    border: $solid;
}
td, th {
    border-right: $solid;
    border-bottom: $solid;
}
tr {
    background-image: -webkit-linear-gradient(left, #fff 0%, #444 50%, #ffffff 100%);
}

以某种方式应用于tr：nth-child和tr的背景图像不适用于tr，而是适用于td。

Answer 1

好的，只是得到了您在此处要说的内容，因此请background代替table代替tr并使用background: #ffffff;代替odd/even tr

Demo

CSS

$solid: 1px solid #444;
table {
    border: $solid;
    background: #1e5799;
    background: -moz-linear-gradient(left,  #1e5799 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(left,  #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(left,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(left,  #1e5799 0%,#7db9e8 100%);
    background: linear-gradient(to right,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
}
td, th {
    border-right: $solid;
    border-bottom: $solid;
}
tr:nth-child(odd) {
   background: #ffffff;
}

渐变应用于每个td的tr渲染。如何在tr上创建水平渐变？

1 个答案: