梯度和窗口重新利用CSS

Question

情況施膠：

與寬度設定爲100%的表，裏面有一個細胞與1000px寬度。表格居中，單元格也是如此。

我想有一個從左到右，從右到左的漸變，將在中心單元格的開始處結束，顏色與單元格相同。

問題是，佔據整個頁面，無論瀏覽器是什麼尺寸，表設置爲100%，該單元被設置爲1000px所以它永遠不會改變它的大小，

如何如果可能，我可以實現我想要的，確保在較小的分辨率/監視器或窗口大小調整時，漸變將在該單元格的開始處停止，因爲漸變是用百分比設置的？

Answer 1

是這樣的東西你想要什麼？

<table cellspacing="0" cellpadding="0"> 
    <tr> 
    <td class="left">&nbsp;</td> 
    <td class="center">Your content goes here</td> 
    <td class="right">&nbsp;</td> 
    </tr> 
</table>​ 

風格，使得

table { 
    /* the table takes up all the space */ 
    width: 100%; 
} 
td.center { 
    /* there is one container column */ 
    width: 1000px; 
    text-align: center; 
    color: white; 
    background-color: black; /* some fixed background color */ 
} 
/* and two columns on the side which fade to some other color, in the respective directions */ 
td.left { 
    background: -webkit-gradient(linear, left, right, from(white), to(black)); 
    background: -webkit-linear-gradient(left, white, black); 
    background: -moz-linear-gradient(left, white, black); 
    background:  -ms-linear-gradient(left, white, black); 
    background:  -o-linear-gradient(left, white, black); 
    background:   linear-gradient(left, white, black); 
} 
td.right { 
    background: -webkit-gradient(linear, right, left, from(white), to(black)); 
    background: -webkit-linear-gradient(right, white, black); 
    background: -moz-linear-gradient(right, white, black); 
    background:  -ms-linear-gradient(right, white, black); 
    background:  -o-linear-gradient(right, white, black); 
    background:   linear-gradient(right, white, black); 
} 

你可以試試這裏的例子：http://jsfiddle.net/qvum4/1/

UPDATE

但是，如果沒有特別原因需要使用表，而你只想達到這個效果，你不應該使用表格。 有幾個jQuery漸變插件，你可以嘗試使用。

您可以開發自定義jQuery解決方案，以保持標記之外的所有樣式亂碼。 試試這個例子：http://jsfiddle.net/YnUpY/1/