एक तालिका में दो पंक्तियों के बीच का स्थान?

Question

क्या यह सीएसएस के माध्यम से संभव है?

मैं कोशिश कर रहा हूँ

tr.classname {
  border-spacing: 5em;
}

कोई फायदा नहीं। शायद मैं कुछ गलत कर रहा हूँ?

Comments

ब्राउज़र क्या है और क्या आप अपने कोड (html / css) का एक स्निपेट प्रदान कर सकते हैं?

— पैट्रिक डेसजार्डिंस 21

अच्छी तरह से मैं ff3 का उपयोग कर रहा हूँ जैसा कि मुझे पता है कि माना जाता है कि नियम का समर्थन करता है, लेकिन अभी के लिए मैं ff3 में ठीक करने के लिए देख रहा हूँ। मैं रिक्ति की कोशिश की और इस प्रकार अब तक कोई भाग्य नहीं है। productlistingitem मुख्य टेबल <टेबल क्लास = "productListingItem" बॉर्डर = "0" सेलपैडिंग = "10" सेलस्पेसिंग = "0"> <tr> <tr> <td class = "dragItem"

— Marin

हो सकता है कि ऐसा इसलिए है क्योंकि border-spacingएक विशेषता से संबंधित है tableऔर नहीं tr। कोशिश करो table.classname {border-spacing:5em}। Note: IE8 बॉर्डर-स्पेसिंग संपत्ति का समर्थन करता है अगर DOCTYPE निर्दिष्ट है।

— वरुण नटराज

जब कोई सीमा नहीं होती है तो मैं लाइन-ऊंचाई का उपयोग करता हूं।

— लीह

क्या इससे आपके सवाल का जवाब मिलता है? CSS: मैं एक तालिका में पंक्तियों के बीच एक अंतर कैसे बनाऊं?

— एलेक्सालेजैंड्रोम

Answer 1

आपको अपने tdतत्वों पर पैडिंग का उपयोग करने की आवश्यकता है । कुछ इस तरह से करना चाहिए ट्रिक आप निश्चित रूप से, नीचे की गद्दी के बजाय शीर्ष पैडिंग का उपयोग करके समान परिणाम प्राप्त कर सकते हैं।

नीचे दिए गए सीएसएस कोड में, अधिक से अधिक संकेत का मतलब है कि पैडिंग केवल उन tdतत्वों पर लागू होती है जो trकक्षा के साथ तत्वों के लिए सीधे बच्चे हैं spaceUnder। इससे नेस्टेड टेबल का उपयोग करना संभव हो जाएगा। (उदाहरण के कोड में सेल सी और डी।) मैं डायरेक्ट चाइल्ड सिलेक्टर के लिए ब्राउज़र सपोर्ट के बारे में बहुत आश्वस्त नहीं हूँ (सोचिए IE 6), लेकिन यह किसी भी आधुनिक ब्राउज़र में कोड को नहीं तोड़ना चाहिए।

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

यह कुछ इस तरह प्रस्तुत करना चाहिए:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Comments

code.google.com/p/ie7-js बच्चे के चयनकर्ता को 5/5, यानी 6, यानी 7 में सपोर्ट जोड़ता है

— एंटनी हैचकिंस

सिवाय इसके कि समस्या का समाधान तब नहीं होता जब आपकी पंक्तियों में पृष्ठभूमि का रंग होता है और आप वास्तव में अपनी पंक्तियों के बीच WHITESPACE चाहते हैं।

— साइमन ईस्ट

@ साइमन: व्हॉट्सएप आमतौर पर खाली जगह को संदर्भित करता है, न कि विशेष रूप से सफेद रंग को। यदि आप पंक्तियों के बीच की जगह को रंगीन करना चाहते हैं, तो आप td-elements पर CSS <code> border-bottom </ code> गुण के साथ प्रयास कर सकते हैं। वह शायद केवल 1px सीमा के साथ सही ढंग से प्रस्तुत करेगा। एक और, लेकिन इतना सुरुचिपूर्ण नहीं, समाधान एक खाली पंक्ति का उपयोग करना होगा।

— Jan Aagard

@ जान: हाँ, बिल्कुल मेरी बात ... पंक्तियों के बीच पारदर्शी खाली जगह डालना काफी मुश्किल है । आपका समाधान कुछ उदाहरणों में मदद करता है, लेकिन उस समस्या को हल नहीं करता है। खाली तालिका पंक्ति सम्मिलित करने से काम हो सकता है, लेकिन यह उचित है। bottom-borderपारदर्शी के लिए एक सेट भी काम कर सकता है, लेकिन मुझे यकीन नहीं है कि यह क्रॉस-ब्राउज़र-संगत कैसे है।

— साइमन ईस्ट

@ साइमन: कोलमैन के पास आपके मुद्दे का एक बदसूरत, अभी तक काम करने वाला समाधान है ।

— १०:१३

Answer 2

मूल तालिका में, सेटिंग का प्रयास करें

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

इसके अलावा एक सीमा घोषणा, और देखें कि क्या यह आपके वांछित प्रभाव को प्राप्त करता है। खबरदार, हालांकि, IE "अलग सीमाओं" मॉडल का समर्थन नहीं करता है।

Comments

हाँ, यह विधि आदर्श होगी , सिवाय इसके कि IE 7 इसका समर्थन नहीं करता है। ब्राउज़र समर्थन के लिए, देखें: quirksmode.org/css/tables.html

— साइमन ईस्ट

इसके अलावा, यह तालिका में सभी पंक्तियों में रिक्ति को नियंत्रित करता है, आप अलग-अलग पंक्तियों के लिए पंक्ति रिक्ति सेट नहीं कर सकते हैं (जो कि ओपी को प्राप्त करने की इच्छा हो सकती है)।

— साइमन ईस्ट

यह क्रोम और फ़ायरफ़ॉक्स के बीच असंगत है। यदि आप एक है, तो theadऔर tbody, यह एक डबल प्रस्तुत करना होगा border-spacingउन लोगों के बीच, क्रोम में (लेकिन फ़ायरफ़ॉक्स में एक भी एक)।

— कैमिलो मार्टिन

यह वास्तविक जवाब है, विशेष रूप border-spacing: 0 1emसे केवल पंक्तियों के बीच अपने रिक्ति प्राप्त करने के लिए निर्धारित किया गया है।

— इग्नायूसर

@igneosaur मैंने वही करने की कोशिश की, जो आपने कहा था लेकिन यह अभी भी सभी पंक्तियों के बीच और केवल पहले दो के बीच रिक्ति को जोड़ता है। क्या आप एक काम करने वाला jsfiddle प्रदान कर सकते हैं?

— user3281466 16

Answer 3

आपके पास किसी भी डेटा वाले आईडी एल्बम के साथ तालिका है ... मैंने trs और tds को छोड़ दिया है

<table id="albums" cellspacing="0">       
</table>

सीएसएस में:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Comments

इसने मेरे लिए अच्छा काम किया। बॉर्डर-स्पेसिंग का पहला तर्क कोशिकाओं के बीच क्षैतिज रिक्ति है, और दूसरा ऊर्ध्वाधर रिक्ति है।

यह हमेशा फैंसी सीएसएस द्वारा नहीं होता है अगर अच्छा पुराना

— एचटीएम

HTML5 मेंcellspacing <table> की विशेषता समर्थित नहीं है।

— Константин Ван

क्या "tbody" के अंदर केवल tr के लिए आवेदन करना संभव है?

— जैसन

Answer 4

चूंकि मेरे पास टेबल के पीछे एक पृष्ठभूमि छवि है, इसलिए इसे सफेद गद्दी के साथ बनाना काम नहीं करेगा। मैंने सामग्री की प्रत्येक पंक्ति के बीच एक खाली पंक्ति डालने का विकल्प चुना:

<tr class="spacer"><td></td></tr>

फिर स्पेसर पंक्तियों को एक निश्चित ऊंचाई और पारदर्शी पृष्ठभूमि देने के लिए सीएसएस का उपयोग करें।

Comments

यह शायद अधिक लचीला है, मुझे लगता है कि होगा। जब आप पहले स्थान (गतिशील रूप से उत्पन्न पृष्ठों) की आवश्यकता होगी, तो आप हमेशा नियंत्रित नहीं कर सकते।

— स्टीफन केंडल

यह मुझे 90 के दशक की याद दिलाता है, जब सीएसएस समर्थन लगभग न के बराबर था और अधिकांश लेआउट के लिए तालिकाओं का उपयोग किया जाता था। मैं अभी भी इसे +1 दे रहा हूं, हालांकि, अन्य "उत्तर" वास्तव में टेबल पंक्तियों के बीच जगह बनाने के मामले में बेहतर नहीं हैं ।

— भूलभुलैया

@ लैब्रिंथ 90 के दशक के बाद से बहुत कुछ नहीं बदला है। HTML के बारे में, यह सब बहुत अधिक शक्तिशाली और बहुत अधिक गन्दा हो गया है।

— मातरिनस

Answer 5

मोज़िला डेवलपर नेटवर्क से :

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

वह आखिरी हिस्सा अक्सर ओवरसाइज़ होता है। उदाहरण:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

अपडेट करें

अब मैं समझता हूं कि ओपी विशिष्ट, अलग पंक्तियों को रिक्ति में वृद्धि करना चाहता है। मैंने ऐसे tbodyतत्वों के साथ एक सेटअप जोड़ा है, जो सिमेंटिक्स को बर्बाद किए बिना पूरा करता है। हालाँकि, मुझे यकीन नहीं है कि यह सभी ब्राउज़रों पर समर्थित है। मैंने इसे क्रोम में बनाया है।

नीचे दिया गया उदाहरण यह दिखाने के लिए है कि आप इसे कैसे बना सकते हैं जैसे कि टेबल अलग-अलग पंक्तियों में मौजूद है, पूर्ण उड़ा सीएसएस मिठास। पहली पंक्ति को tbodyसेटअप के साथ अधिक रिक्ति दी । बेझिझक उपयोग करें!

समर्थन सूचना: IE8 +, क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Comments

अगर मैं दो विशेष पंक्तियों के बीच कुछ वर्टीकल स्पेस चाहता था, तो मैंने एक स्पेसर पंक्ति जोड़ी <tr> <td colspan = "2" style = "padding-bottom: 1em;"> </ td> </ tr>

— पॉल स्टैन

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

— जस्टस रोमिजेन

यह सच है, अगर वह वास्तव में तालिका का प्रतिनिधित्व करने के लिए तालिका का उपयोग कर रहा है। यदि वह सारणीबद्ध तरीके से डेटा प्रदर्शित करने के तरीके के रूप में सिर्फ एक तालिका का उपयोग कर रहा है, तो मैं यह तर्क दूंगा कि दो वस्तुओं के बीच अंतर को दर्शाने के बजाय एक पंक्ति सम्मिलित करने के लिए अधिक अर्थ है केवल ऊपर td elments जोड़ने के लिए। या लाइन के नीचे क्योंकि उपयोगकर्ता जो करना चाहता है वह दो लाइनों के बीच स्थान जोड़ रहा है, एक रेखा के भीतर तत्वों का आकार नहीं बढ़ाता है।

— पॉल टेलर

Answer 6

आप विभाजक पंक्ति जोड़ने का प्रयास कर सकते हैं:

एचटीएमएल:

<tr class="separator" />

सीएसएस:

table tr.separator { height: 10px; }

Comments

IE के लिए, एक शरीर के बिना tr पहचान नहीं होगी। डमी td टैग भी जोड़ें।

— नेप

समस्या यह है कि HTML5 में, W3C सत्यापनकर्ता यह कहते हुए एक त्रुटि का उत्सर्जन करेगा कि "एक तालिका पंक्ति 0 कॉलम चौड़ी थी, जो पहली पंक्ति द्वारा स्थापित स्तंभ गणना से कम है"।

— डेविड ग्रेसन

अच्छा, मैंने एक और <tr>, <td> और <p> जोड़ा था और पी-टैग की दृश्यता को छिपाया था। :-)

— जेपी

Answer 7

आप तालिका सेल का मार्जिन नहीं बदल सकते। लेकिन आप गद्दी बदल सकते हैं। टीडी की गद्दी बदलें, जो सेल को बड़ा बना देगा और पाठ को बढ़े हुए पैडिंग के साथ साइड से दूर धकेल देगा। यदि आपके पास सीमा रेखाएं हैं, तो भी, यह अभी भी वैसा नहीं होगा जैसा आप चाहते हैं।

Comments

हां, गद्दी सीमा को नीचे धकेल देगी, इसलिए border-bottomऔर padding-bottomइसका मतलब है कि सीमा गद्दी के नीचे होगी।

— डैन डस्केल्सस्कु

Answer 8

सीमा-पतन पर एक नज़र डालें : अलग विशेषता (डिफ़ॉल्ट) और सीमा-स्थान की संपत्ति।

सबसे पहले, आप के लिए है अलग उन लोगों के साथ सीमा-पतन , तो आप को परिभाषित कर सकते स्तंभों और पंक्तियों के बीच की जगह के साथ सीमा-रिक्ति ।

ये दोनों सीएसएस गुण वास्तव में हर ब्राउज़र पर अच्छी तरह से समर्थित हैं , यहां देखें ।

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Answer 9

ठीक है, आप कर सकते हैं

tr.classname td {background-color:red; border-bottom: 5em solid white}

सुनिश्चित करें कि पृष्ठभूमि रंग पंक्ति के बजाय td पर सेट है। यह अधिकांश ब्राउज़रों पर काम करना चाहिए ... (Chrome, अर्थात & ff परीक्षण)

Comments

यह अजीब ऊर्ध्वाधर-संरेखण मुद्दों बनाता है, कम से कम फ़ायरफ़ॉक्स में

— cjohansson

Answer 10

आपको border-collapse: separate;मेज पर सेट करने की आवश्यकता है ; अधिकांश ब्राउज़र डिफ़ॉल्ट स्टाइलशीट की शुरुआत होती है border-collapse: collapse;, जो बॉर्डर रिक्ति को खोदती है।

इसके अलावा, सीमा-रिक्ति: पर जाता है TD, नहीं TR।

प्रयत्न:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Comments

बॉर्डर-स्पेसिंग टेबल

— नॉट

धन्यवाद। मैंने आपको पहले टिप्पणी ठीक करने के लिए धन्यवाद दिया, लेकिन एक अति उत्साही संपादक ने मेरी शैली को बदलना चाहा और इस प्रक्रिया में कोड को तोड़ दिया, मेरे कहने का धन्यवाद भी हटा दिया। मैं अब इसे यहाँ रख रहा हूँ जहाँ इसे संपादित नहीं किया जा सकता है।

— जॉन ह्युगलैंड ३०'१४

Answer 11

आप तालिका में लाइन-ऊंचाई का उपयोग कर सकते हैं :

<table style="width: 400px; line-height:50px;">

Comments

आप सही हैं लेकिन पाठ को भी लाइन-ऊँचाई मिलेगी जो अच्छा नहीं है, मुझे लगता है कि आपको कोलमैन को देखना चाहिए! उनके पास इसका अच्छा समाधान है

— वकास ताहिर

Answer 12

tr { 
    display: block;
    margin-bottom: 5px;
}

Comments

मैं प्रदर्शन को प्राथमिकता दूंगा: इनलाइन-ब्लॉक;

— DS_web_developer

Answer 13

बहुत देर से जवाब :)

यदि आप फ़्लोट को trतत्वों पर लागू करते हैं, तो आप marginविशेषता के साथ दो पंक्तियों के बीच जगह बना सकते हैं ।

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Comments

यह डरावना है। यह वास्तव में क्या कर रहा है पंक्ति के लिए displayसंपत्ति सेट कर रहा है block। यह पंक्ति को एक मार्जिन रखने की अनुमति देता है। कार्यक्षेत्र मार्जिन " पर लागू होता है: तालिका-कैप्शन, टेबल और इनलाइन-टेबल के अलावा अन्य तालिका प्रदर्शन प्रकारों को छोड़कर सभी तत्व "। चूंकि table-rowउन अपवादों में से कोई भी नहीं है, तो वह इसे गिनता नहीं है। आप शायद एक ही प्रभाव प्राप्त कर सकते हैं, tr {display:block;}लेकिन मैं एक जटिल तालिका में इन विधियों में से किसी का उपयोग करने से सावधान रहूंगा। यह संभवत: वह परिणाम नहीं देगा जो आप अपेक्षा करते हैं।

— शोलेिंगर

यह डरावना है, लेकिन यह काम किया। I7 में नहीं है, लेकिन तालिका में सीधे सेलस्पेसिंग यानी 7 में काम करता है।

— Liko

फ़्लोटिंग रो एक अच्छा समाधान नहीं है .. खासकर यदि आपका पेज पंक्ति की चौड़ाई 2x से बड़ा है। दोनों टैग्स में चौड़ाई विशेषता जोड़ें

— AndreaCi

Answer 14

पंक्तियों के बीच रिक्ति का भ्रम पैदा करने के लिए, पृष्ठभूमि रंग को पंक्ति में लागू करें और फिर सफेद रंग के साथ एक मोटी सीमा बनाएं ताकि "स्पेस" बनाया जाए :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Answer 15

तालिकाओं के लिए रिक्ति देने का सही तरीका है, उदाहरण के लिए सेलपैडिंग और सेलस्पेसिंग का उपयोग करना

<table cellpadding="4">

Comments

आप इसे सीएसएस के माध्यम से कर सकते हैं, जो मैं कहूंगा कि यह अधिक "सही" है (इस तथ्य के अलावा कि यह अधिक सुरुचिपूर्ण है, मार्कअप से सीएसएस के लिए चलती स्टाइल बैंडविड्थ को बचाता है)।

— कैमिलो मार्टिन

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

— माजिनाबाइ

Answer 16

मैं इसी तरह के मुद्दे से जूझते हुए लड़खड़ा गया। मैंने वरुण नटराज के उत्तर को काफी मददगार पाया है, लेकिन मैं इसके बजाय एक पारदर्शी सीमा का उपयोग करूंगा।

td { border: 1em solid transparent; }

पारदर्शी सीमाओं में अभी भी चौड़ाई है।

Answer 17

2015 में सबसे नवीनतम ब्राउज़रों के लिए काम करता है। सरल समाधान। यह पारदर्शी के लिए काम नहीं करता है, लेकिन थोर्नवेन के जवाब के विपरीत, मैं किसी भी आकार के साथ प्रस्तुत करने के लिए पारदर्शी नहीं हो सकता।

    tr {
      border-bottom:5em solid white;
    }

Answer 18

बस निम्नलिखित शैलियों को divअंदर रखें tdऔर सेट करें div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Answer 19

मुझे लगता है कि यह एक पुराने धागे का जवाब है और अनुरोध किए गए समाधान नहीं हो सकता है, लेकिन जब तक कि सभी सुझाए गए समाधानों ने ऐसा नहीं किया, जो मुझे चाहिए, इस समाधान ने मेरे लिए काम किया।

मेरे पास 2 टेबल सेल थे, एक बैकग्राउंड कलर वाला, दूसरा बॉर्डर कलर वाला। उपरोक्त समाधान सीमा को हटा देते हैं, इसलिए दाईं ओर स्थित सेल मध्य-वायु में तैरता हुआ दिखाई देगा। समाधान है कि चाल किया बदलने के लिए था table, trऔर tddivs और इसी वर्गों के साथ: तालिका होगा div id="table_replacer", टीआर होगा div class="tr_replacer"और टीडी होगा div class="td_replacer"(परिवर्तन टैग अच्छी तरह से स्पष्ट रूप से के रूप में divs को बंद करने)

मेरी समस्या का हल पाने के लिए सीएसएस है:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

आशा है कि यह किसी की मदद करता है।

Comments

Imho, यह समाधान नियमित तालिका, tr, td पैटर्न और शैली tr {प्रदर्शन: ब्लॉक;} का उपयोग करने के बराबर है, जिसे मैंने कोशिश की थी। समस्या: तालिका भिन्न दिखती है, क्योंकि td तत्व तालिका की चौड़ाई तक नहीं हैं, लेकिन ट्रे के भीतर बाईं ओर तैरते हैं। मतलब, सभी पंक्तियों के td तत्व अब लंबवत रूप से संरेखित नहीं हैं।

— एंड्रियास स्टैंकेवित्ज़

Answer 20

आप <div /> तत्वों के साथ <td /> तत्व भर सकते हैं, और उन divs पर कोई भी मार्जिन लागू कर सकते हैं जो आपको पसंद हैं। पंक्तियों के बीच एक दृश्य स्थान के लिए, आप <tr /> तत्व पर एक दोहराई जाने वाली पृष्ठभूमि छवि का उपयोग कर सकते हैं। (यह वह समाधान था जो मैंने आज ही इस्तेमाल किया था, और यह IE6 और फायरफॉक्स 3 दोनों में काम करता है, हालांकि मैंने इसे आगे नहीं बढ़ाया है।)

इसके अलावा, यदि आप <td /> s के अंदर <div /> s डालने के लिए अपने सर्वर कोड को संशोधित करने का विरोध कर रहे हैं, तो आप <div / में <td /> सामग्री को गतिशील रूप से लपेटने के लिए jQuery (या कुछ इसी तरह) का उपयोग कर सकते हैं। >, आपको सीएसएस को वांछित रूप से लागू करने में सक्षम बनाता है।

Answer 21

या आप रिक्तियों को जोड़ना चाहते हैं पंक्तियों के बीच में मार्जिन की ऊंचाई के साथ एक रिक्त जोड़ें

Answer 22

यहाँ एक सरल और सुरुचिपूर्ण समाधान है, कुछ केवेट के साथ:

• आप वास्तव में अंतराल को पारदर्शी नहीं बना सकते हैं, आपको उन्हें एक विशिष्ट रंग देने की आवश्यकता है।
• आप अंतराल के ऊपर और नीचे सीमाओं के कोनों को गोल नहीं कर सकते
• आपको अपनी तालिका कोशिकाओं की गद्दी और सीमाओं को जानना होगा

इसे ध्यान में रखते हुए, यह प्रयास करें:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

वास्तव में आप जो कर रहे हैं वह एक आयताकार ::beforeब्लॉक को उन सभी कोशिकाओं के शीर्ष में चिपका रहा है जो आप एक अंतर से पहले चाहते हैं। ये ब्लॉक मौजूदा सीमाओं को ओवरलैप करने के लिए, उन्हें छिपाते हुए कोशिकाओं से थोड़ा बाहर निकलते हैं। ये ब्लॉक सिर्फ एक शीर्ष और नीचे की सीमा के साथ एक साथ सैंडविच होते हैं: शीर्ष सीमा गैप बनाती है, और नीचे की सीमा कोशिकाओं की मूल शीर्ष सीमा की उपस्थिति को फिर से बनाती है।

ध्यान दें कि यदि आपके पास टेबल के चारों ओर और साथ ही साथ सेल है, तो आपको अपने ब्लॉक के क्षैतिज -ve मार्जिन को और बढ़ाने की आवश्यकता होगी। इसलिए 4px टेबल बॉर्डर के लिए, आप इसके बजाय उपयोग करेंगे:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

और यदि आपकी तालिका border-collapse:separateइसके स्थान पर उपयोग करती है border-collapse:collapse, तो आपको पूर्ण तालिका सीमा चौड़ाई का उपयोग करना होगा (a)

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... और (बी) सीमा की दोहरी-चौड़ाई को प्रतिस्थापित करते हैं, जिसे अब अंतराल के नीचे दिखाई देने की आवश्यकता है:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

यदि आप पसंद करते हैं, या पंक्ति अंतराल के बजाय ऊर्ध्वाधर (स्तंभ) अंतराल बनाने के लिए तकनीक आसानी से एक .gapafter संस्करण के लिए अनुकूलित है।

यहां एक कोडपेन है जहां आप इसे कार्रवाई में देख सकते हैं: https://codepen.io/anon/pen/agqPpW

Answer 23

यहाँ यह आसानी से काम करता है:

#myOwnTable td { padding: 6px 0 6px 0;}

मुझे लगता है कि अगर आप की जरूरत है जो निर्दिष्ट करके एक अधिक सूक्ष्मता से लेआउट तैयार कर सकते हैं।

Answer 24

यह ऊपर दिखाया गया है ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

ऊर्ध्वाधर कॉलम संरेखण को हटाता है इसलिए सावधान रहें कि आप इसका उपयोग कैसे करते हैं

Answer 25

आपने कोशिश की है:

tr.classname { margin-bottom:5em; }

वैकल्पिक रूप से, प्रत्येक td को भी समायोजित किया जा सकता है:

td.classname { margin-bottom:5em; }

या

 td.classname { padding-bottom:5em; }

Comments

क्या यह वास्तव में काम करता है? मेरे पास है div.el { display: table-row; margin: 10px; }, और मार्जिन कुछ भी नहीं करता है। मुझे पता है कि यह वास्तविक तालिका से थोड़ा अलग है, लेकिन यह नहीं होना चाहिए ...

— bradlis7

तालिका पंक्तियों / कक्षों में मार्जिन नहीं है।

— एस्पेन