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

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>​

文案：

$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%);
}

​</p>

以某种方式应用于 tr:nth-child 和 tr 的背景图像在 tr 上不起作用，而是在 td 上起作用。

Answer 1

好的，刚刚得到你想说的，所以给background而table不是tr使用background: #ffffff;你的odd/even tr

演示

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;
}