सीएसएस/वेबकिट: तालिका पंक्ति

Question

के लिए पृष्ठभूमि छवियां कुछ कारणों से जब आप सफारी/क्रोम में एक tr में पृष्ठभूमि छवि लागू करते हैं तो यह प्रस्तुत करता है जैसे नियम प्रत्येक टीडी पर लागू होता है।

फ़ायरफ़ॉक्स:

Firefox http://www.whyprime.com/temp/table-firefox.png

सफारी:

Safari http://www.whyprime.com/temp/table-safari.png

मैं इस लेख एक फिक्स चर्चा कर पाया:

http://snook.ca/archives/html_and_css/applying_a_back

मैं इसे आईपी में स्पेसर गिफ के साथ काम करने में सक्षम था लेकिन सफारी के लिए इसे समझ नहीं पाया।

http://www.whyprime.com/temp/table-background.html

Answer 1

अपनी मेज हमेशा केवल 2 पंक्तियाँ होगा? जैसे:

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

यदि ऐसा है तो

, एक सरल लेकिन बहुत ज्यादा सुंदर नहीं समाधान दो छवियों में अपनी पृष्ठभूमि छवि विभाजित है, और छोड़ दिया और सही स्तंभ के लिए एक CSS वर्ग लागू होते हैं, करने के लिए तीर का आधा लागू करने के लिए होगा दाईं ओर बाएँ स्तंभ की, और सही स्तंभ के बाईं ओर करने के लिए:

<table> 
    <tr> 
    <td class="left"></td> 
    <td class="right"></td> 
    </tr> 
</table> 

आपका सीएसएस तो समान हो सकता है:

td.left 
{ 
    background: #ffffff url(../PathToLeftBackground.png) top right; 
} 
td.right 
{ 
    background: #fffff url(../PathToRightBackground.png) top left; 
} 

तुम भी है जहाँ आप एक स्प्राइट छवि इस्तेमाल कर सकते हैं 1 छवि का उपयोग करें और दो पृष्ठभूमि के लिए इसे अलग-अलग स्थिति दें।

मुझे एहसास है कि यह शायद सबसे आदर्श समाधान नहीं है लेकिन यह कम से कम आपके मुद्दे को ठीक करेगा और आपकी परियोजना को आगे बढ़ाएगा। मैं कभी-कभी प्रगति करने के लिए इस तरह के सरल समाधानों का उपयोग करता हूं, और उसके बाद इसे और अधिक कुशल बनाने के लिए समस्या का पुनरीक्षण करता हूं।

आशा है कि इससे मदद मिलती है!

Answer 2

डिफ़ॉल्ट रूप से, टीआर और टीडी में गुण तालिका-कक्ष और तालिका-पंक्ति प्रदर्शित होती है। हम उन्हें इसके बारे में भूल जाते हैं और सरल ब्लॉक तत्वों की तरह महसूस करने की जरूरत है:

tr {display: block;} 
td {display: inline-block; background: transparent;} 

इस कोड मेरे लिए प्रतिपादन की समस्या हल हो।

Answer 3

थोड़ा देर हो चुकी है, लेकिन आप इस समस्या को हल करने के लिए "पृष्ठभूमि-संलग्नक: निश्चित" का उपयोग कर सकते हैं।

<table> 
    <tr class="bg"> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

और सीएसएस

tr.bg { 
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px; 
    background-attachment: fixed; 
} 

और यह काम करता है!