table:tr and gradient not working

Question

I want to fill the table row background to x percent.

My problem is that when table cell's width is not 100%, the background color does not appear correctly.

Html :

<table>
<tbody>
    <tr id="tr1">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id="tr2">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id="tr3">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

CSS :

table {
margin: 0 auto;
width: 500px;
border-spacing: 0;
}
#tr1 {
background: #7CB663; /* Old browsers */
background: -moz-linear-gradient(left,#7CB663 50%, #ffffff 50%); /*      FF3.6+ */
background: -webkit-gradient(linear, left top, right top,
color-stop(50%,#7CB663), color-stop(50%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,#7CB663 50%,#ffffff 50%); /*Chrome10+,Safari5.1+*/
background: -o-linear-gradient(left,#7CB663 50%,#ffffff 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,#7CB663 50%,#ffffff 50%); /* IE10+ */
background: linear-gradient(to right,#7CB663 50%,#ffffff 50%); /* W3C */
background-attachment: fixed;
}
#tr2 {
background: #7CB663; /* Old browsers */
background: -moz-linear-gradient(left,#7CB663 40%, #ffffff 40%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(40%,#7CB663),
color-stop(40%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,#7CB663 40%,#ffffff 40%); /*Chrome10+,Safari5.1+*/
background: -o-linear-gradient(left,#7CB663 40%,#ffffff 40%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,#7CB663 40%,#ffffff 40%); /* IE10+ */
background: linear-gradient(to right,#7CB663 40%,#ffffff 40%); /* W3C */
background-attachment: fixed;
}
#tr3 {
background: #7CB663; /* Old browsers */
background: -moz-linear-gradient(left,#7CB663 20%, #ffffff 20%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(20%,#7CB663),
color-stop(20%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,#7CB663 20%,#ffffff 20%); /*Chrome10+,Safari5.1+*/
background: -o-linear-gradient(left,#7CB663 20%,#ffffff 20%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,#7CB663 20%,#ffffff 20%); /* IE10+ */
background: linear-gradient(to right,#7CB663 20%,#ffffff 20%); /* W3C */
background-attachment: fixed;
}
td {
border: 1px solid #000;
}

Output :

Has anyone a good solution for this problem?

Answer 1

I'm assuming your problem is that the gradient stops aren't relative to the table width, but to the width of body.

Looks like that's because you're setting background-attachment: fixed. Getting rid of that property did the trick for me.

edited JSfiddle

Answer 2

it is because your background gradient has been stopped at 50%, if you need to display color in full tr width, use following css

background: rgba(0, 0, 0, 0) linear-gradient(to right, #7cb663 50%, #ffffff 100%) repeat fixed 0 0;

this css will help you to repeat color in full width.