मैं तालिका कक्षों के बीच पैडिंग कैसे प्राप्त करूं, लेकिन पूरी तालिका के आसपास नहीं?

Question

मैं पैडिंग के साथ एक तालिका रखना चाहता हूं प्रत्येक कोशिका के बीच, लेकिन बाहरी किनारों के चारों ओर नहीं, जो तालिका के चारों ओर नहीं है।

का उपयोग करना:

border-collapse : separate; 
border-spacing : 0.5em; 

मुझे हर जगह padding देता है, का उपयोग करते समय:

border-collapse : collapse; 

कोई पैडिंग कहीं भी देता है।

एक वैकल्पिक दृष्टिकोण का प्रयास कर रहा है, मैं पूरी तरह से कोशिकाओं क्षैतिज के बीच एक td + td चयनकर्ता का उपयोग करके गद्दी मिल सकती है। हालांकि मैं tr + tr चयनकर्ता का उपयोग नहीं कर सकता क्योंकि ऐसा लगता है कि tr मार्जिन, पैडिंग और सीमा नियमों को अनदेखा करता है।

और, ज़ाहिर है, एक सादे td चयनकर्ता पर पैडिंग सभी कोशिकाओं, यहां तक ​​कि बाहरी कोशिकाओं के बाहरी किनारों पर भी लागू होता है।

इसे केवल वर्तमान पीढ़ी के ब्राउज़र के लिए काम करना है - मेरे लिए कोई आईई 6 या 7 बहुत बहुत धन्यवाद। और मैं आईई 8 पर किसी भी नींद को खोने वाला नहीं हूं, हालांकि यह अच्छा होगा अगर यह अच्छा लगे।

Answer 1

यह एक सही समाधान नहीं है, क्योंकि यह सीमा अंतर के बजाय पैडिंग का उपयोग करता है। संभवतः यह आपकी समस्या के लिए काम करेगा हालांकि।

HTML:

<table> 
    <tr> 
     <td>Data 1</td> 
     <td>Data 2</td> 
    </tr> 
    <tr> 
     <td>Data 3</td> 
     <td>Data 4</td> 
    </tr> 
</table> 

और सीएसएस:

table { 
    border: 1px red solid; 
    border-collapse: separate; 
} 

td { 
    background-color: green; 
    border: 1px black solid; 
    padding: 10px; 
} 

td:first-child { 
    padding-left: 0px; 
} 

td:last-child { 
    padding-right: 0px; 
} 

tr:first-child td { 
    padding-top: 0px; 
} 

tr:last-child td { 
    padding-bottom: 0px; 
} 

का उत्पादन:

भी on jsFiddle।

Answer 2

क्या आप जोड़ने के लिए मार्कअप के साथ परेशान हो सकते हैं। पंक्ति में पहले सेल पर सबसे पहले और आखिरी तक .last, और मुझे लगता है कि पहली और आखिरी पंक्तियों के लिए भी, और फिर पैड उचित है?