सीमा पतन के साथ सीएसएस में तालिका सीमा रंग

मैं एक तालिका में कुछ फ़ील्ड के ऊपर एक रेखा रखना चाहता हूं, यह इंगित करने के लिए कि यह उपरोक्त मानों का योग है। हालांकि, तालिका में पहले से ही सीमाएं हैं।सीमा पतन के साथ सीएसएस में तालिका सीमा रंग

यहां एक उदाहरण है: मेरे पास सीमाओं के साथ एक सारणी है। मैंने एक फ़ील्ड पर सीमा-तल सेट किया है, और इसके नीचे के क्षेत्र में सीमा-शीर्ष सेट किया है। ये दोनों एक ही सीमा निर्दिष्ट करते हैं। शीर्ष के लिए सीएसएस का उपयोग किया जाता है। नीचे एक का उपयोग करने का कोई तरीका है?

<html> 
    <head> 
     <style type="text/css"> 
      table { border-collapse: collapse; } 
      td.first { border-bottom: solid red 1px; } 
      td.second { border-top: solid gold 1px; } 
     </style> 

    <body> 
     <table> 
      <tr><td class="first">Hello</td></tr> 
      <tr><td class="second">World</td></tr> 
     </table> 
    </body> 
</html>

यह दो कोशिकाओं को उनके बीच एक लाल रेखा के साथ दिखाता है। सोने की रेखा पाने का कोई तरीका है?

स्रोत

2010-11-04 Sjoerd

इसे संघर्ष-समाधान के साथ करना है। [यह एक पृष्ठ है] (http://www.the-art-of-web.com/css/bordercollapse/) जो बताता है कि यह कैसे काम करता है और ब्राउज़र विभिन्न सीमाओं की गणना कैसे करता है। –

मेरा मानना है कि इसके लिए कोई सीएसएस समाधान नहीं है, क्योंकि सीमा पतन बस ऐसा करता है जो करता है। आप कुछ कामकाज का उपयोग कर सकते हैं, उदाहरण के लिए जावास्क्रिप्ट का उपयोग करें। क्या आपके पास आपके दस्तावेज़ में कोई जावास्क्रिप्ट पुस्तकालय शामिल है? –

मैंने इसे इस तरह कुछ उपयोग करके jQuery का उपयोग करके हल किया: http://www.mail-archive.com/[email protected]/msg89877.html – Sjoerd

यह border-collapse का एक परिभाषित व्यवहार है। ओ रेली सीएसएस निश्चित गाइड 3 संस्करण के पृष्ठ 357 का कहना है: सेल, पंक्ति, पंक्ति:

अगर गिर सीमाओं एक ही शैली और चौड़ाई है, लेकिन रंग में मतभेद है, तो ... सबसे से कम से कम पसंदीदा करने के लिए समूह, कॉलम, कॉलम समूह, तालिका।

यदि ... दो पंक्तियों जैसे तत्वों से आते हैं ... तो रंग सीमाओं से लिया जाता है जो सबसे ऊपर और बाएं हैं।

तो सबसे ऊपर, जो लाल है, जीत जाता है।

इसे ओवरराइड करने का एक तरीका पंक्ति के रंग पर जीतने के लिए रंग के लिए सेल का उपयोग करना हो सकता है।

उदाहरण: http://jsfiddle.net/Chapm/

नियमों को इस की तुलना में अधिक पूर्वता है

व्यापक सीमा संकरा लोगों

और उसके बाद से अधिक जीतता है "एक ही रंग नियम है",

ठोस पर डबल जीत, फिर धराशायी, बिंदीदार, रिज, बाहर सेट, नाली, इनसेट

आप इस पर जीतने के लिए के लिए सोने के लिए 2px उपयोग कर सकते हैं, और मैं क्रोम में करने की कोशिश की 1px लेकिन double उपयोग करने के लिए, और यह 1px solid के रूप में प्रकट होता है और यह रूप में अच्छी तरह लाल से अधिक जीतेंगे। यद्यपि यदि आप इस विधि का उपयोग करना चाहते हैं, तो यह सुनिश्चित करना सबसे अच्छा हो सकता है कि आपके द्वारा समर्थित ब्राउज़र इस तकनीक का उपयोग करके समान व्यवहार करें।

http://jsfiddle.net/Chapm/2/

स्रोत

2010-11-04 12:19:23

दिखाता है यह वास्तव में मेरी समस्या हल करता है। हालांकि, यह आईई 7 में काम नहीं करता है। – Sjoerd

मैंने और नियमों के साथ अद्यतन किया ... हाँ, यह काफी विशिष्ट है और यह सभी प्रकार के ब्राउज़रों में समान नहीं हो सकता है। –

आपको बहुत बहुत धन्यवाद! मैं इस के साथ इतना बुरा संघर्ष कर रहा था और मुझे नहीं पता था कि क्या हो रहा था। 'डबल' चाल बहुत अच्छा काम किया। मैं इसे होवर पर 'टीआर' के चारों ओर एक सीमा दिखाने के लिए उपयोग कर रहा हूं। – vaughan

अपने कोड से border-collapse: collapse; हटाएं, इसके बजाय cellspacing अपनी तालिका के लिए 0 पर विशेषता दें।

स्रोत

2010-11-04 12:08:42

यह मेरे लिए काम नहीं करता है ... –

इस http को जांचें : //jsfiddle.net/CKHwj/। सीमा-पतन सेट करें: अलग; इसके बजाय –

हाँ लेकिन वह दोनों सोने के साथ-साथ लाल सीमा (फ़ायरफ़ॉक्स) –

बस अपनी शैली से td.first { border-bottom: solid red 1px; } हटा दें।

या td.first चयनकर्ता में बदलें।

Example here।

स्रोत

2010-11-04 12:10:20 Kyle

बस शून्य करने के लिए सीमा-पतन अलग करने के लिए और सेट सीमा-रिक्ति बदल जाते हैं।

नोट: IE8 केवल सीमा-रिक्ति संपत्ति का समर्थन करता है यदि कोई! DOCTYPE निर्दिष्ट है।

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    table { 
 
     border-collapse: separate; 
 
     border-spacing: 0px; 
 
    } 
 
    
 
    td.first { 
 
     border-bottom: solid red 1px; 
 
    } 
 
    
 
    td.second { 
 
     border-top: solid gold 1px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <td class="first">Hello</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="second">World</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

साथ Win7 पर परीक्षण किया गया: क्रोम 16, आईई 9, एफएफ 9, सफारी 5.0.5।

स्रोत

2012-02-09 13:09:15

ओपीएस प्रश्न थोड़े अजीब थे। यकीन नहीं है कि वह दो सीमाओं चाहता था या नहीं। मैं यहां आया क्योंकि मैं प्रत्येक '' के ऊपर और नीचे की सीमा वाली एक शाखा चाहता था, लेकिन सीमाएं गिर रही थीं। मैंने 'सीमा-पतन की कोशिश की: अलग 'और उन कोशिकाओं के चारों ओर मार्जिन थे जिन्हें मैं सीएसएस से छुटकारा नहीं पा रहा था। यह 'सीमा-दूरी' था: 0' मैं लापता था। आपके उत्तर के लिए धन्यवाद। – Gavin

सीमा पतन के साथ सीएसएस में तालिका सीमा रंग

उत्तर

संबंधित मुद्दे