表格：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將幫助您重複顏色全寬。