टीबीओडीवाई तत्वों के बीच अतिरिक्त सीमा अंतर को कैसे हटाया जाए?

Question

महत्वपूर्ण: यह प्रश्न अब मान्य नहीं है। यह बग क्रोम के हाल के संस्करणों में तय किया गया था।

मैं border-spacing: 1px सीएसएस नियम का उपयोग उन दोनों के बीच एक 1px स्पेस होना करने के लिए अपने TABLE में सभी कक्षों मिलता है। हालांकि, मुझे अपनी तालिका में कई TBODY तत्वों का उपयोग करना होगा। मुझे 2pxTHEAD, TBODY और TFOOT तत्व (क्रोम) के बीच मिलता है।

1px के साथ इन 2px अंतराल को प्रतिस्थापित करने का सबसे आसान तरीका क्या है?

सटीक HTML और सीएसएस कोड: http://jsfiddle.net/qQA3Z/

Answer 1

नोट: यह एक वेबकिट विशिष्ट बग है। (फ़ायरफ़ॉक्स में मौजूद नहीं है, और सामान्य आईई भी इसका परीक्षण करने के लिए जेएसफ़िल्ड लोड नहीं करेगा।)

दुर्भाग्यवश, ठीक से को ठीक करने का कोई तरीका नहीं है। इस विषय पर पहले से ही an open question है। इसके अतिरिक्त, an open bug report since Chrome 8 है जिसे क्रोम 20 के माध्यम से मौजूद होने की पुष्टि हुई है (और मैं क्रोम 25 में पुष्टि कर सकता हूं)। इस मामले पर open Webkit bug thread भी है, जो अभी भी "NEW" है।

ईमानदार होने के लिए, मुझे इसके लिए एक समाधान भी नहीं मिल रहा है। border-spacing, margin के साथ बजाना, और यहां तक ​​कि position इस पर कोई प्रभाव नहीं प्रतीत होता है।

Answer 2

ऐसा लगता है वहाँ table स्तर पर border-collapse के बीच एक संघर्ष और बच्चों thead, tbody, tfoot है कि। एक संभावित समाधान:

http://jsfiddle.net/qQA3Z/3/

body { margin: 10px; } 
div {border: 1px solid #aaa; display:inline-block} 
table { 
    background: #fff; 
    border-collapse: collapse; 
} 
td { 
    font-family: Tahoma; 
    background: #ddd; 
    padding: 5px 8px; 
    border:1px solid #fff 
} 

<div> 
<table> 
    <thead> 
     <tr><td colspan='2'>Header</td></tr> 
     <tr><td>Column 1</td><td>Column 2</td></tr> 
    </thead> 
    <tbody> 
     <tr><td>Element</td><td>Element</td></tr> 
     <tr><td>Element</td><td>Element</td></tr> 
    </tbody> 
    <tfoot> 
     <tr><td colspan='2'>Footer</td></tr> 
    </tfoot> 
</table> 
</div> 

Answer 3

यह मेरे लिए यह हल करती है:

table { border-collapse: collapse!important;} 

Answer 4

क्या व्यक्तिगत रूप से इसे हल मुझे 0

line-height को line-height बदल रहा था के लिए : 0; सीमा-दूरी: 0