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

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

</ p>

どういうわけか、tr：nth-​​childとtrに適用されたbackground-imageは、trでは機能しませんが、代わりにtdで機能します。

Answer 1

さて、あなたがここで言おうとしていたことを理解したので、代わりに与えbackgroundて、あなたのために使ってくださいtabletrbackground: #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;
}