क्या हम बहु सेल टेबल में क्रोम में टेबल पंक्ति पृष्ठभूमि छवि समस्या को हल कर सकते हैं?

Question

इसे अक्सर पूछा जाता है - लेकिन मैंने अभी तक एक अच्छा जवाब नहीं देखा है (और मैंने देखा)। यदि आप किसी तालिका पंक्ति में सीएसएस में पृष्ठभूमि छवि सेट करते हैं- छवि प्रत्येक सेल में खुद को दोहराएगी। यदि आप (पंक्ति के लिए) सेट करते हैं और background-image: none (कोशिकाओं के लिए) सेट करते हैं तो यह आईई पर समस्या हल करता है लेकिन क्रोम पर नहीं! मैं पृष्ठभूमि स्थिति का उपयोग नहीं कर सकता क्योंकि कई कॉल हैं और उनका आकार भिन्न होता है। (और चित्र symmetrical- नहीं है यह एक फीका एक तरफ से बाहर है किसी को सीएसएस कोड के लिए

उदाहरण ??:।।

tr { height: 30px; position:relative;} 
tr.green { background: url('green_30.png') no-repeat left top; } 
tr.orange { background: url('oranger_30.png') no-repeat left top;} 
tr.red { background: url('red_30.png') no-repeat left top; } 
td { background-image: none; } 

एचटीएमएल बुनियादी है - एक बहु सेल तालिका

लक्ष्य प्रत्येक पंक्ति में अलग-अलग रंगों में फीका होना है, लेकिन यह कोई गैर-पैटर्न छवि हो सकती है।

Answer 1

ठीक है, मैंने इस बारे में पढ़ने में उम्र बिताई, और सभी ब्राउज़रों के लिए एक आसान फिक्स नहीं मिला, लेकिन जैसा कि मैंने देखें कि आप निश्चित ऊंचाई पंक्तियों का उपयोग कर रहे हैं, मैंने अपना खुद का कामकाज विकसित किया है: http://jsfiddle.net/DR8bM/

मूल रूप से, पंक्ति पर पृष्ठभूमि छवि डालने की बजाय, आप इसे प्रत्येक पंक्ति के पहले कक्ष में पूर्ण स्थान पर विभाजित करते हैं (और पूरी पंक्ति को भरने के लिए इसका विस्तार करते हैं)। यह थोड़ा हैकी है, लेकिन आप जो चाहते हैं उसे हासिल करने का एकमात्र विश्वसनीय तरीका हो सकता है।

Answer 2

फ्लोट जोड़ें: पंक्ति में बाईं ओर, इसे ठीक करना चाहिए।

tr {float:left;} 

Answer 3

Windows 10 पर क्रोम 54 में परीक्षण किया गया:

tr { 
    background-attachment: fixed; 
} 

हालांकि ऐसा लगता है यह कीड़े के बिना नहीं है - पृष्ठभूमि छवि केवल loadtime पर व्यूपोर्ट, जिसका मतलब है भर में दोहराता है कि कोशिकाओं जब आप दिखाई देते हैं कि नीचे स्क्रॉल पृष्ठभूमि नहीं है।