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

Question

मतलब परिणाम तालिका को इस तरह कम दिखाना:

[=== पंक्ति ===]
[=== पंक्ति ===]
[=== पंक्ति ===]
[=== पंक्ति ===]

... और इस तरह:

[=== पंक्ति ===]

[=== पंक्ति ===]

[=== पंक्ति ===]

[=== पंक्ति ===]

मैंने जोड़ने की कोशिश की

margin-bottom:1em;

दोनों के लिए td और tr लेकिन कुछ नहीं मिला। कोई विचार?

Comments

सेलस्पेसिंग और सेलपैडिंग क्यों नहीं?

— adatapost 12:00

सेलस्पेसिंग कॉलम के बीच रिक्ति भी देगा।

— रहुल

सेलस्पेसिंग और सेलपैडिंग मान्य नहीं हैं (एक्स) एचटीएमएल। आपको उनका उपयोग नहीं करना चाहिए।

— freiksenet

@freiksenet: आप गलत हैं। वे पूरी तरह से मान्य HTML4 ( w3.org/TR/html401/struct/tables.html#h-11.2.1 ), XHTML1 ( w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ) और यहां तक ​​कि XHTML1 भी मान्य हैं .1 ( w3.org/MarkUp/DTD/xhtml-table-1.mod )।

— व्यापारी

तालिका में दो पंक्तियों के बीच अंतरिक्ष

— ThisClark

Answer 1

आप सभी की जरूरत:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

यह मान लें कि आप 1em ऊर्ध्वाधर अंतराल चाहते हैं, और कोई क्षैतिज अंतराल नहीं है। यदि आप ऐसा कर रहे हैं, तो आपको संभवतः अपनी लाइन-ऊंचाई को नियंत्रित करने पर भी ध्यान देना चाहिए।

अजीब तरह का है कि कुछ जवाब लोगों ने सीमा-पतन को शामिल किया: पतन, जिसका प्रभाव सवाल के लिए पूछे गए सवाल के बिल्कुल विपरीत है।

Comments

ओह ठीक है, मैं एक विशिष्ट स्तंभ प्राप्त करने की कोशिश कर रहा था, ताकि एक व्यापक रिक्ति हो जो इसे टेबल पर लागू करने के लिए नहीं सोचे

— जोनाथन।

यह समाधान आपको कुछ पंक्तियों में रिक्ति को चुनिंदा रूप से लागू करने की अनुमति नहीं देता है।

— फ्लिम्स

प्रश्न यह अनुरोध नहीं करता है।

— जॉन हौगलैंड

यह एक अच्छा विचार है लेकिन पहली पंक्ति के शीर्ष अंतर को भरने के लिए मुझे एक वर्कअराउंड पर आना पड़ा जो मानक नहीं है जो मुझे लगता है लेकिन काम करता है। दे रहा है thead, tbody {position: relative; top: -{border-spacing-value} }।

— फ़रज़ाद YZ

क्या मैं कह सकता हूँ कि मैं तुमसे प्यार करता हूँ? हे भगवान। आपने अभी-अभी मेरे $ $

— NikosKeyz

Answer 2

table {
    border-collapse: collapse;
}

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

जब तक आप बॉर्डर-पतन पहले सेट नहीं करते, तब तक सेल कुछ भी प्रतिक्रिया नहीं देगी। एक बार (अन्य बातों के अलावा) आप TR तत्वों में सीमाएँ भी जोड़ सकते हैं।

यदि यह लेआउट के लिए है, तो मैं DIV और अधिक अप-टू-डेट लेआउट तकनीकों का उपयोग करने के लिए आगे बढ़ूंगा, लेकिन यदि यह सारणीबद्ध डेटा है, तो अपने आप को बाहर खटखटाएं। मैं अभी भी डेटा के लिए अपने वेब एप्लिकेशन में तालिकाओं का भारी उपयोग करता हूं।

Comments

क्या आपने इसका परीक्षण किया? ऐसा लगता है कि td के साथ या बिना पतन के पैडिंग हो सकती है। सीमाएं पतन के साथ काम करती हैं, लेकिन IE पर नहीं।

— कोबी

यह काम किया। कष्टप्रद है कि मार्जिन काम नहीं करता है, लेकिन इस मामले में कोई फर्क नहीं पड़ता। धन्यवाद।

— MGOwen

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

— जॉन हॉगलैंड

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

— जॉन हैगलैंड 1

यह सीएसएस के उन अजीब कोनों में से एक है, जिनके बारे में कल्पना करने वाले लोगों ने नहीं पढ़ा है। (उनमें से एक आश्चर्यजनक रूप से बड़ी संख्या में हैं। इसी तरह फ्लोट को मूल रूप से कभी भी उस तरह से उपयोग नहीं किया जाना चाहिए जो व्यवहार में उपयोग किया जाता है।)

— जॉन हागलैंड

Answer 3

यदि कोई अन्य उत्तर संतोषजनक नहीं है, तो आप हमेशा एक खाली पंक्ति बना सकते हैं और इसे सीएसएस के साथ उचित रूप से पारदर्शी कर सकते हैं।

Comments

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

— फ्लिम

अनाम उपयोगकर्ता की सीएसएस के साथ अलग-अलग पंक्तियों की ऊंचाई को निर्दिष्ट करने का नकारात्मक दृष्टिकोण, मेज पर डमी सामग्री को जोड़ने के लिए काफी हद तक बेहतर है, इस अवसर पर कि आपको व्यक्तिगत पंक्तियों को नियंत्रित करने की आवश्यकता है, जो कि यह सवाल नहीं था।

— जॉन हागलैंड

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

— MGOwen

@MGOwen क्या आप एक्सेसिबिलिटी टूल्स को नाम दे सकते हैं जो इस परिदृश्य के तहत विफल होंगे, और वे कैसे विफल होंगे? अब मैं एक्सेसिबिलिटी सलाह के बारे में संदेह कर रहा हूं जिसमें बारीकियों का उल्लेख नहीं है, वहां बहुत खराब एक्सेसिबिलिटी सलाह है जो वास्तव में किसी की मदद नहीं करती है (उदाहरण के लिए, HTML 5 के लिए दस्तावेज़ की रूपरेखा सलाह सभी गलत थी , एक्सेसिबिलिटी टूल नहीं है जिस तरह से लोग कहते हैं कि वे काम करते हैं)।

— फ्लिमल जूल

Answer 4

यदि आपके पास सीमाएँ नहीं हैं, या सीमाएँ हैं और कक्षों के अंदर रिक्ति चाहते हैं, तो आप उपयोग कर सकते हैं padding, या line-height। जहाँ तक मुझे पता है, कोशिकाओं और पंक्तियों पर मार्जिन का कोई प्रभाव नहीं है।
कोशिकाओं के अंतर के लिए एक सीएसएस संपत्ति हैborder-spacing , लेकिन यह IE6 / 7 पर काम नहीं करता है (इसलिए आप इसे अपनी भीड़ के आधार पर उपयोग कर सकते हैं)।

यदि अन्य सभी विफल होते हैं, तो आप cellspacingअपने मार्कअप में पुरानी विशेषता का उपयोग कर सकते हैं - लेकिन यह आपको कॉलम के बीच रिक्ति भी देगा। कुछ सीएसएस रीसेट आपको क्रॉस-ब्राउज़र समर्थन प्राप्त करने के लिए इसे वैसे भी सेट करने का सुझाव देते हैं:

/ * टेबल अभी भी cellspacing="0"मार्कअप में जरूरत है * /

Answer 5

यह तरीका है (मैं सोच रहा था कि यह असंभव है):

सबसे पहले टेबल को केवल वर्टिकल बॉर्डर-स्पेसिंग (उदाहरण के लिए 5px) दें और इसे क्षैतिज बॉर्डर-स्पेसिंग 0. पर सेट करें। फिर आपको प्रत्येक रो सेल को उचित बॉर्डर देना चाहिए। उदाहरण के लिए प्रत्येक पंक्ति में दाईं ओर की सेल में ऊपर, नीचे और दाएं तरफ बॉर्डर होना चाहिए। बाईं-अधिकांश कोशिकाओं में ऊपर, नीचे और बाईं ओर सीमा होनी चाहिए। और इन 2 के बीच की अन्य कोशिकाओं में केवल ऊपर और नीचे की सीमा होनी चाहिए। इस उदाहरण की तरह:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Answer 6

मेरी राय में, करने का सबसे आसान तरीका आपके टैग में पैडिंग जोड़ना है।

td {
 padding: 10px 0
}

आशा है कि यह आपकी मदद करेगा! चीयर!

Comments

यह तालिका पंक्ति के अंदर अतिरिक्त स्थान बनाता है। यदि टेबल की पंक्तियों में ऐसे रंग हैं जो अच्छे नहीं दिखेंगे।

— कोकोडको

Answer 7

बस आप एक तत्व पर padding-topऔर उपयोग कर सकते हैं ।padding-bottomtd

इकाई इस सूची से कुछ भी कर सकती है:

डेमो कोड:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Answer 8

टीडी में पैडिंग काम करता है यदि आप चाहते हैं कि अंतरिक्ष में td के समान पृष्ठभूमि रंग हो

मेरे मामले में, हेडर पंक्ति के बीच सफेद स्थान के लिए आवश्यकता थी और जो भी इसके ऊपर था

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

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Answer 9

यदि आप तालिकाओं के उपयोग से डिजाइन के साथ चिपके रहते हैं तो सबसे अच्छा विचार यह होगा कि तालिका में प्रत्येक पंक्तियों के बीच कोई सामग्री और निर्दिष्ट ऊँचाई के साथ एक खाली पंक्ति दी जाए।

आप इस जटिलता से बचने के लिए div का उपयोग कर सकते हैं। बस प्रत्येक div के लिए एक मार्जिन दे।

Comments

तालिकाओं (जैसे सारणीबद्ध डेटा) का उपयोग करने के लिए अभी भी अच्छे कारण हैं। आप सही हैं, खाली पंक्तियाँ निश्चित रूप से एक मूर्ख मार्ग है: P लेकिन एक समाधान है, सीमा-पतन।

— रयान फ्लोरेंस

Answer 10

आप सीएसएस का उपयोग करके प्रत्येक पंक्ति के लिए ऊंचाई को भी संशोधित कर सकते हैं।

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

आप <td>तत्व की ऊंचाई को भी संशोधित कर सकते हैं , यह आपको एक ही परिणाम देना चाहिए।

Answer 11

<tr>नीचे एक और बनाएं और सामग्री के लिए कुछ स्थान या ऊंचाई जोड़ें<td>

उदाहरण के लिए फ़िडआउट चेकआउट करें

https://jsfiddle.net/jd_dev777/wx63norf/9/

Comments

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

— MGOwen

@MGOwen आपके सुझाव के लिए धन्यवाद। पूरी तरह से सहमत

— जयदीप चौहान

Answer 12

Tr करने के लिए निम्नलिखित नियम जोड़ें और यह काम करना चाहिए

float: left

नमूना (इसे IE9 ऑफ़कोर्स में खोलें :)): http://jsfiddle.net/zshmN/

संपादित करें: यह एक कानूनी या सही समाधान नहीं है जैसा कि कई लोगों ने बताया है, लेकिन अगर आपको कोई विकल्प नहीं है और कुछ की जरूरत है तो यह IE9 में काम करेगा।

तो सभी जो नीचे वोट दे रहे हैं, कृपया हमें सही समाधान बताएं

Comments

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

— २१

अरे @ धर्मवाद, क्षमा करें, लेकिन मुझे आपकी बात समझ में नहीं आई। क्या आप इसे थोड़ा और समझा सकते हैं? या यदि आप एक ऐसी बेला प्रदान कर सकते हैं जहां यह विधि विफल हो जाती है क्योंकि मैं इस पद्धति का बड़े पैमाने पर उपयोग कर रहा हूं और उन परिदृश्यों की देखभाल करना चाहता हूं जहां यह विफल हो जाता है।

— संदीप चौधरी

स्तंभों का कोई स्पष्ट परिसीमन नहीं है; जिसका अर्थ है कि सारणीबद्ध डेटा अपनी दृश्य संरचना खो देता है और पढ़ने में कठिन हो जाता है। jsfiddle.net/verism/zshmN/5

— verism

@verism फिर यह एक मुद्दा है, लेकिन हम फिक्स चौड़ाई कॉलम को परिभाषित कर सकते हैं। मुझे पता है कि यह एक अच्छा समाधान नहीं है, लेकिन मुझे कोई अन्य समाधान नहीं मिला जो IE9 पर काम करता है

— संदीप चौधरी 5

सीएसएस विनिर्देश के अनुसार फ़्लोटिंग टेबल पंक्तियाँ कानूनी नहीं हैं। CSS2 के सेक्शन 17 में उस डिस्प्ले की आवश्यकता होती है: टेबल-रो एलिमेंट डिस्प्ले के भीतर हो: टेबल-रो-ग्रुप, -हैडर-ग्रुप, या -फूटर-ग्रुप एलिमेंट्स। हालांकि, धारा 9 के अनुसार फ्लोटिंग एल्गोरिथ्म एक अनाम ब्लॉक अभिभावक को इंजेक्ट करता है। इसका मतलब है कि तालिका पंक्ति में अब कानूनी पैरेंट लेआउट नहीं है, और ब्राउज़र अनुमान लगा रहा है कि क्या करना है। यह गलत है।

— जॉन हौगलैंड २ John