html - 表 :tr and gradient not working

Question

我想将表格行背景填充到 x%。

我的问题是当表格单元格的宽度不是 100% 时，背景颜色显示不正确。

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

输出:

有没有人能解决这个问题？

Answer 1

我假设你的问题是渐变停止不是相对于表格宽度，而是相对于 body 的宽度。

看起来是因为您正在设置 background-attachment: fixed。摆脱那个属性(property)对我有用。

edited JSfiddle