表：tr 和渐变不起作用

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。摆脱那个属性对我有用。

edited JSfiddle

Answer 2

这是因为你的背景渐变已经停止在 50%，如果你需要全 tr 宽度显示颜色，请使用以下 css

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

此 CSS 将帮助您以全宽重复颜色。