टीबीओडीवाई तत्वों के बीच अंतर कैसे रखा जाए

Question

मेरे पास इस तरह की एक तालिका है:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

मैं प्रत्येक टो तत्व के बीच कुछ रिक्ति रखना चाहूंगा, लेकिन पैडिंग और मार्जिन का कोई प्रभाव नहीं है। कोई विचार?

Comments

क्या 'tbody' टैग दोहराना सही है? मैंने हमेशा जो देखा है वह सब "<tr> .. </ tr>" एक "tbody 'टैग के अंदर है।

— Saneef

हाँ यह मान्य है। युक्ति कहती है: <! ELEMENT TABLE - - (CAPTION?; (COL * | COLGROUP *, THEAD ?, TFOOT ;, TBODY +)> का अर्थ है कि एक या अधिक tbodies होना चाहिए। w3.org/TR/html4/struct/tables.html#h-11.2.1

— निक

Answer 1

यह कोशिश करो, अगर आपको सीमाएं नहीं लगती हैं।

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Comments

सीमा-शीर्ष आज़माएं: 15px ठोस पारदर्शी;

— स्टीव आलमंड

इस पर जोर देना चाहता था। transparentसीमा रंग के रूप में उपयोग करें । @SteveAlmond ने क्या कहा।

— २१

यदि टेबल / tbody / tr / td का बैकग्राउंड-कलर है, तो बॉर्डर कलर को सेट करने के transparentलिए यह एलिमेंट का बैकग्राउंड-कलर देगा, जो एलिमेंट के बॉडी से अनिवार्य रूप से इंडिसेयूशिबल है। आपको स्पष्ट रूप से उस सीमा को रंगीन करने की आवश्यकता होगी जिस रंग को आप इसे प्रकट करना चाहते हैं (इसे कथित रूप से अदृश्य बनाने के लिए)

— लड़के पैसी

Answer 2

ऐसा कुछ काम करेगा, जो आपके ब्राउज़र समर्थन आवश्यकताओं पर निर्भर करता है:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Comments

यह एकमात्र समाधान है जो तब काम करता है जब आपकी कोशिकाओं की पृष्ठभूमि होती है जो अंतरिक्ष में नहीं होनी चाहिए।

— लरदडा

इसने मेरे लिए अच्छा काम किया। क्या कोई कमियां हैं? इसके अलावा, दो कॉलन क्यों?

— nh2

महान समाधान। सब कुछ सुलभ रखता है!

— जेसन टी फेदरिंगम

@ nh2: डबल-कॉलन छद्म सामग्री के लिए हैं और एकल-कोलोन छद्म चयनकर्ताओं के लिए है। यह CSS सिंटैक्स का अपडेट है। सब कुछ बस एकल बृहदान्त्र का उपयोग करने के लिए उपयोग किया जाता है। पुराने ब्राउज़र दोहरे कॉलन (जैसे, IE <= 8) का समर्थन नहीं करते हैं।

— dbmikus

यह उपयोग करने के लिए सुरक्षित नहीं है display: table-row;?

— राहेल

Answer 3

किसी पृष्ठ को लेआउट करने के लिए खाली तालिका तत्वों का उपयोग करने के बारे में लोगों की हमेशा विवादास्पद राय होगी (जैसा कि इस उत्तर के द्वारा दर्शाया गया है)। मैं इसे पहचानता हूं, लेकिन कभी-कभी इसे इस तरह से उपयोग करना आसान होता है जब आप " त्वरित और गंदे " तरीके से काम कर रहे होते हैं ।

मैंने पिछली परियोजनाओं में खाली पंक्तियों का उपयोग तालिका पंक्तियों के समूह समूहों में किया है। मैंने स्पेसर पंक्तियों को अपने स्वयं के एक सीएसएस वर्ग को सौंपा और उस वर्ग के लिए एक ऊंचाई को परिभाषित किया जो तालिका पंक्तियों के उस समूह के लिए एक शीर्ष और निचले मार्जिन के रूप में कार्य करता था।

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

यदि आपके टेबल सेल पर बॉर्डर नहीं है, तो आप अपनी शैली की शीट में अपनी विशिष्ट सेल या पंक्ति को एक ऊँचाई परिभाषित कर सकते हैं जो समान रूप से आपकी टेबल की सभी पंक्तियों को खाली कर देती है।

tr{
   height: 40px;
}

Comments

अच्छी तरह से अगर आप अतिरिक्त मार्कअप जोड़ रहे हैं, तो प्रत्येक वर्ग की पहली पंक्ति पर एक कक्षा क्यों न डालें?

— निक नेम

ठीक है, ऐसा इसलिए हो सकता है क्योंकि पंक्तियाँ कोड जनरेट की जाती हैं, और मार्कअप में एक अलग पंक्ति जोड़ने से उत्पन्न सामग्री की पहली पंक्ति के लिए एक विशेष मामला बनाने की तुलना में अधिक रखरखाव हो सकता है।

— रॉल्फ रैंडर

सभी को आप चाहते हैं डाउनवोट करें, लेकिन कमियों के बिना यह एकमात्र समाधान है - और भले ही यह पृथक्करण का उल्लंघन करता है, एक खाली पंक्ति IMO का एक बड़ा हिस्सा नहीं है।

— Xkeeper

कमियां के बिना, मेरे बट! इस पर एक स्क्रीनरीडर का उपयोग करने का प्रयास करें और गलत पंक्ति की सूचना दें। बेहतर अभी तक, तालिका को एक स्प्रेडशीट में कॉपी और पेस्ट करने का प्रयास करें। यदि आपके पास बहुत अधिक सामग्री है, तो आप घंटों तक सुधार करते रहेंगे। टेबल्स डेटा प्रदर्शित करने के लिए हैं (और अत्यंत सुलभ हैं), वर्गों के बीच प्रस्तुति नहीं।

— जेसन टी फेदरिंगम

यह केवल दृश्य है। ध्यान रखें कि html ऐसे दस्तावेज़ भी हैं जिन्हें संसाधित किया जा सकता है, इसलिए उनके अंदर की सामग्री को अच्छी तरह से स्वरूपित किया जाना चाहिए। जैसा कि ऊपर उल्लेख किया गया है, कॉपी-पेस्ट तालिका या स्क्रीन रीडर का उपयोग बस विफल हो जाएगा। इस तरह के डिजाइन को प्रोत्साहित नहीं किया जाना चाहिए। :: सामग्री समाधान बेहतर है क्योंकि यह मार्कअप को गड़बड़ नहीं करता है।

— पावेल-कुज़्निक

Answer 4

मैं मुसीबत रिक्ति ठीक से कई में किया गया था <tbody>के साथ ::beforeछद्म, की उपस्थिति में <tr>युक्त <td>ब्राउज़रों के एक जोड़े में रोस्पेन साथ।

मूल रूप से, यदि आपके पास <tbody>इस तरह से एक संरचित है:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

और आप ::beforeइस तरह से छद्म तत्व पर सीएसएस लिखने की सलाह देते हैं :

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

यह रोस्पैन को प्रभावित करेगा, जिससे दूसरे के भीतर तालिका "खो" हो सकती है-पहले एक में <tr>कितने <td>-रोस्पैन मौजूद हैं।

इसलिए, अगर किसी को उस प्रकार की समस्या का सामना करना पड़ता है, तो समाधान ::beforeइस तरह से छद्म शैली करना है:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

यहाँ एक बेला है

Answer 5

यहाँ एक और संभावना है जो इस पर निर्भर करती है: पहला बच्चा जो सभी ब्राउज़रों में उपलब्ध नहीं है:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

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

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Comments

यह बहुत अच्छी तरह से काम नहीं करेगा यदि आपके पास कुछ भी हो जो सेल के आकार के सापेक्ष सामग्री की स्थिति पर निर्भर करता है, जैसे बॉक्स-छाया, पृष्ठभूमि चित्र, या बहुत कुछ।

— Xkeeper

बस इस उत्तर को Google पर खोजने वाले अन्य लोगों के लिए स्पष्ट करने के लिए, मुझे लगता है कि यह 2008 में लिखा गया था, अब इस उत्तर (2015) में सभी प्रमुख ब्राउज़रों का पूर्ण समर्थन है? कम से कम caniuse.com फर्स्ट-चाइल्ड पर जाँच से अच्छा लगता है?

— 19fox में redfox05

Answer 6

बस के displayरूप में सेट blockऔर यह काम करेगा।

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Comments

यह उत्तर स्वीकृत उत्तर होना चाहिए क्योंकि केवल वही है जो "नो-बॉर्डर" कॉलम के साथ बॉर्डर वाले टीओडी का उपयोग करने की अनुमति देता है।

— 22

display:blocktbody तत्वों के बीच कॉलम संरेखण को तोड़ता है। अब आपको टेबल लेआउट इंजन का लाभ नहीं मिलेगा

— एम कॉनरैड

Answer 7

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

वैकल्पिक रूप से, आप अपने टीबीओडीवाई वर्ग की अतिप्रवाह संपत्ति को "दृश्यमान" के अलावा किसी अन्य चीज़ पर सेट कर सकते हैं । यह विधि आपको एक अलग बॉर्डर मॉडल को बनाए रखने की अनुमति देती है:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Comments

मैं कुछ ऐसा ही करना

— चाह

Answer 8

क्योंकि पेडिंग को टीडी के लिए लागू किया जा सकता है, आप + साइन के साथ एक चाल कर सकते हैं। तब एक टीडी के पहले टीआर के टीडी के लिए एक शीर्ष पैडिंग देना संभव होगा:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

मैंने "tbody + tbody" को जोड़ा है, इसलिए पहले tbody में कोई शीर्ष गद्दी नहीं होगी। हालाँकि, इसकी आवश्यकता नहीं है।

जहां तक ​​मुझे पता है कि कोई कमियां नहीं हैं :), हालांकि पुराने ब्राउज़रों का परीक्षण नहीं किया।

Answer 9

आप border-spacingउन समूहों के बीच स्थान जोड़ने के लिए तालिका पंक्ति समूहों वाली तालिका में उपयोग कर सकते हैं । हालांकि, मुझे नहीं लगता कि यह निर्दिष्ट करने का कोई तरीका है कि कौन से समूह हैं और कौन से नहीं हैं।

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

सीएसएस

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

Answer 10

नया जवाब

आप जितने चाहें उतने <tbody>टैग का उपयोग कर सकते हैं । मुझे एहसास नहीं था कि अब तक W3C द्वारा ठीक था। यह कहने के लिए कि मेरा नीचे दिया गया समाधान काम नहीं करता (यह करता है), लेकिन आप जो करने की कोशिश कर रहे हैं उसे करने के लिए, अपनी <tbody>टैग कक्षाओं को असाइन करें और फिर <td>सीएसएस के माध्यम से अपने व्यक्तिगत टैग को संदर्भित करें:

table tbody.yourClass td {
    padding: 10px;
}

और आपका HTML इस प्रकार:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

उस आदमी की कोशिश करो :)

पुराने ANSWER

आप जो भी करते हैं, रिक्त पंक्तियों को सम्मिलित नहीं करते हैं ...

आपकी तालिका में 1 से अधिक तत्व तत्व नहीं होने चाहिए। आप क्या कर सकते हैं अपने <tr>तत्वों में वर्ग या आईडी विशेषता सेट करें और उनके संबंधित <td>टैग पैडिंग दें:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

तुम भी ऊपर और नीचे <tr>एक अतिरिक्त वर्ग असाइन कर सकते हैं ताकि वे केवल ऊपर या नीचे गद्दी, क्रमशः:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

और आपके HTML में, आपका <tr>टैग इस तरह दिखाई देगा:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

उम्मीद है की यह मदद करेगा!

Answer 11

djensen47 उत्तर नए ब्राउज़रों के लिए बहुत अच्छा काम करता है, हालाँकि, जैसा कि यह बताया गया था, IE7 यह काम नहीं करता है।

पुराने ब्राउज़रों का समर्थन करने के लिए इस मुद्दे के लिए मेरा वर्कअवे प्रत्येक कोशिकाओं की सामग्री को एक डिव के अंदर लपेटना था। फिर div में एक मार्जिन-टॉप जोड़ें।

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

सीएसएस

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

ऊँचाई की सेटिंग, पाठ के चारों ओर टूटने से div के अंदर इस्तेमाल होने वाले किसी भी सेल रंग को रोकने के लिए कोशिकाओं को कम से कम 30px ऊंचा रखती है। मार्जिन-टॉप पूरी पंक्ति को लंबा करके वांछित स्थान बनाता है।

Answer 12

खुद को सुलझाने की कोशिश करते हुए इस पार आया। <br>समापन </tbody>टैग से ठीक पहले एक टैग लगाने में मुझे सफलता मिली । यह विशुद्ध रूप से विज़ुअल फ़िक्स है, लेकिन मेरे द्वारा परीक्षण किए गए अधिकांश ब्राउज़रों पर काम करता है।

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

साथ ही सुलभ होना चाहिए।