सीएसएस का उपयोग करके कोशिकाओं (td) के बीच स्थान जोड़ें

Question

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

Comments

के संभावित डुप्लिकेट सीएसएस में सेट cellpadding और cellspacing कैसे?

— यूज़र

Answer 1

आप चाहते हैं border-spacing:

<table style="border-spacing: 10px;">

या कहीं सीएसएस ब्लॉक में:

table {
  border-spacing: 10px;
}

पर quirksmode देखें border-spacing। ध्यान रखें कि border-spacingIE7 और उसके नीचे काम नहीं करता है।

Comments

IE7 और नीचे में, आप तालिका टैग में सेलस्पेसिंग विशेषता का उपयोग कर सकते हैं। आप इसे IE में भी काम करने के लिए दोनों की आपूर्ति कर सकते हैं। अन्य ब्राउज़र शैली को प्राथमिकता देंगे।

— तोर वालमो

Answer 2

table { 
  border-spacing: 10px; 
} 

मेरे हटाए जाने के बाद यह काम किया

border-collapse: separate;

मेरे टेबल टैग से।

Comments

अलग होने के बजाय अलग, लेकिन इसने मेरी मदद की :-)

— FredRoger

हाँ पता नहीं था कि आपको 'बॉर्डर-पतन' को भी बदलना होगा। यह सही उत्तर होना चाहिए।

— जलेगीओ

Answer 3

मेरा है:

border-spacing: 10px;
border-collapse: separate;

Comments

मैं मार्जिन को प्रभावित करने के लिए बॉडर-पतन सीएसएस संपत्ति को जोड़ने की आवश्यकता है। धन्यवाद

— ufk

Answer 4

टैग या सीएसएस संपत्ति के लिए उपयोग cellspacingऔर cellpaddingविशेषताओं पर विचार करें ।tableborder-spacing

Answer 5

सेल टैगिंग (कोशिकाओं के बीच की दूरी) टेबल टैग का पैरामीटर ठीक वही है जो आप चाहते हैं। नुकसान यह एक मूल्य है, जिसका उपयोग एक्स और वाई दोनों के लिए किया जाता है, आप अलग-अलग रिक्ति या लंबवत / क्षैतिज रूप से पैडिंग नहीं कर सकते। एक सीएसएस संपत्ति भी है, लेकिन यह व्यापक रूप से समर्थित नहीं है।

Answer 6

मान लीजिए cellspcing/ cellpadding/ border-spacingसंपत्ति ने काम नहीं किया, तो आप कोड का पालन कर सकते हैं।

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

मैंने कोशिश की है और तालिका-चौड़ाई का उपयोग करके बटन को अलग करते हुए सफल हुआ है और 2 या 1% के रूप में एक खाली td बनाता है यह अधिक अलग नहीं लौटाता है।

Answer 7

यदि आप पक्षों और ऊपर-नीचे के लिए अलग मान चाहते हैं।

<table style="border-spacing: 5px 10px;">