You can see the problem here: http://jsfiddle.net/vadirn/5pgXS/1/ (only -webkit-gradient used).
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%);
}
Somehow background-image applied to tr:nth-child and tr doesn't work on tr, but on td instead.
Ok just got what you were trying to say here, so give background
to table
instead of tr
and use background: #ffffff;
for your 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With