एक तालिका पंक्ति में एक पृष्ठभूमि ढाल को लागू करना

Question

क्या पृष्ठभूमि पृष्ठभूमि ढाल होना संभव है जो एक संपूर्ण तालिका पंक्ति को फैलाता है? मैं व्यक्तिगत तालिका कक्षों में पृष्ठभूमि को लागू करने में सक्षम हूं, भले ही मैं इसे रोकने की कोशिश कर रहा हूं।

http://jsfiddle.net/cGV47/2/

आप देख सकते हैं, मैं border-collapse:collapse उपयोग कर रहा हूँ और मैं <tr> और <th> बच्चे तत्वों के लिए background:transparent को निर्दिष्ट कर रहा हूँ, अभी तक के लिए लाल ढाल: यहाँ एक उबला हुआ नीचे नमूना कि jsfiddle पर वेबकिट को लक्षित करता है प्रत्येक टेबल सेल के लिए बाएं दोहराया जाता है। मैंने पृष्ठभूमि को <tr> पर भी लागू करने का प्रयास किया है, लेकिन जैसा कि आप अभी देखते हैं उसी परिणाम के साथ।

jsfiddle पर जाए बिना कोड को देखने के लिए यहां है:

एचटीएमएल

<table> 
    <thead> 
     <tr> 
      <th>One</th> 
      <th>Two</th> 
      <th>Three</th> 
      <th>Four</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>un</td> 
      <td>deux</td> 
      <td>trois</td> 
      <td>quatre</td> 
     </tr> 
    </tbody> 
</table> 

सीएसएस

* {margin:0;padding:0;border:0;border-collapse:collapse;} 
table { width:100%; } 
thead { background: -webkit-linear-gradient(left, rgba(222,22,22,1) 0%, rgba(222,222,222,0) 20%, rgba(222,222,222,0) 80%, rgba(222,222,222,1) 100%); } 
thead tr, thead th { background:transparent; } 

Answer 1

thead पर सेट background-attachment:fixed; और यह ठीक

http://jsfiddle.net/cGV47/64/

Answer 2

नहीं सुंदर समाधान है, लेकिन यह क्या करता है चाल। आपने कलर रेंज का 25% रखने के लिए प्रत्येक th सेट अप किया है। उदाहरण नीचे 0 से 255.

http://jsfiddle.net/cGV47/3/

ही HTML आपके पास पहले से करने के लिए एक रंग श्रेणी का उपयोग करता है। यहाँ सीएसएस है:

table { width:100%; } 

th { 
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, 
               rgba(191,191,191,1) 100%); 
} 
th + th { 
    background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%, 
               rgba(128,128,128,1) 100%); 
} 
th + th + th { 
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%, 
               rgba(64,64,64,1) 100%); 
} 
th + th + th + th { 
    background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%, 
               rgba(0,0,0,1) 100%); 
} 

मैं गूगल पर इस समस्या का पता चला: http://code.google.com/p/chromium/issues/detail?id=122988 लेकिन कोई समाधान है।
http://jsfiddle.net/cGV47/4/

Answer 3

मुझे लगता है कि इन करने के लिए एक बेहतर समाधान है:

• पूरे करने के लिए ढाल पृष्ठभूमि लागू करें

  फ़ायरफ़ॉक्स इस मुद्दे (किसी अन्य ब्राउज़रों जांच नहीं की) नहीं है तालिका।

• फिर थैड और टफटर के लिए ठोस पृष्ठभूमि लागू करें।

table { border:0; border-collapse:collapse; 
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(108,211,229,0.2) 40%, rgba(108,211,229,0.2) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(108,211,229,0.2)), color-stop(60%,rgba(108,211,229,0.2)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* IE10+ */ 
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */    
} 

table thead, tfoot { 
    background: #fff; 
} 

एक नज़र डालें: http://jsfiddle.net/5brPL/

Answer 4

मैं अपने आप को पाया है काम करेंगे ब्रांड के नए repeating-linear-gradient, परीक्षण जो स्पष्ट रूप से <tr> तत्वों के लिए काम करता है (मेरे पास केवल है यद्यपि Google क्रोम में परीक्षण किया गया)।

चाल सबसे व्यापक दोहराव पैटर्न प्रदान करना है, ताकि ... यह दोहराना नहीं है।

इस प्रयास करें:

tr { 
    background: repeating-linear-gradient(
     45deg, 
     red 0%, 
     blue 100% 
    ); 
} 

http://jsfiddle.net/slyy/2pzwws0d/