सीएसएस के साथ अवांछित तालिका सेल सीमाओं को हटाना


89

मुझे एक अजीब और निराशाजनक समस्या है। सरल मार्कअप के लिए:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

मैं थ्रेड , tr और tr विषम तत्वों के लिए अलग-अलग पृष्ठभूमि-रंग मान लागू करता हूं । समस्या यह है कि अधिकांश ब्राउज़रों में, प्रत्येक सेल में एक अवांछित सीमा होती है जो किसी भी तालिका पंक्तियों का रंग नहीं है। केवल फ़ायरफ़ॉक्स 3.5 में तालिका में किसी भी सेल में कोई सीमा नहीं है।

मैं यह जानना चाहता हूं कि अन्य प्रमुख ब्राउज़रों में इन सीमाओं को कैसे हटाया जाए ताकि तालिका में आपको दिखाई देने वाली एकमात्र चीज वैकल्पिक रंग हो।


2
सीमा-पतन को जोड़ने का सुझाव देने वाले सभी के लिए धन्यवाद: सीएसएस में पतन। यही किया।
बॉब

जवाबों:


211

आपको इसे अपने CSS में जोड़ना होगा:

table { border-collapse:collapse }

13
ध्यान दें कि इसे टेबल पर लागू किया जाना है , न कि td के। मैंने सिर्फ यह गलती की और आधे घंटे के ऊपर बिताए यह पता लगाने की कोशिश कर रहा है कि यह काम क्यों नहीं कर रहा था।
जावेद छिपकली


15

अपने HTML को इस तरह संशोधित करें:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(मैंने जोड़ा border="0" cellpadding="0" cellspacing="0")

CSS में, आप निम्न कार्य कर सकते हैं:

table {
    border-collapse: collapse;
}

12

सीमा को हटाने के लिए, इस तरह से सीएसएस का उपयोग करना:

td {
 border-style : hidden!important;
}

8

cellspacingतालिका की विशेषता सेट करें 0

आप सीएसएस शैली का उपयोग भी कर सकते हैं border-spacing: 0, लेकिन केवल अगर आपको IE के पुराने संस्करणों का समर्थन करने की आवश्यकता नहीं है।


1

आप भी जोड़ना चाह सकते हैं

table td { border:0; }

उपर्युक्त सेलपैडिंग की स्थापना के बराबर है = "0"

यह ब्राउज़रों द्वारा कोशिकाओं में स्वचालित रूप से जोड़े गए पैडिंग से छुटकारा दिलाता है जो सिद्धांत पर निर्भर हो सकता है और / या किसी भी सीएसएस का उपयोग डिफ़ॉल्ट ब्राउज़र शैलियों को रीसेट करने के लिए किया जाता है


1
सेलपैडिंग तालिका सामग्री और इसकी सीमाओं के बीच का स्थान है td{padding:X}। सेलस्पेसिंग प्रत्येक सेल की बॉर्ड्रीज़ (सेल बॉर्डर के बीच "मार्जिन") के बीच का स्थान है। टेबल टैग पर विशेषता border-collapseक्या करती है, आप इसकी नकल कर सकते हैं cellspacing, लेकिन यह मूर्खतापूर्ण नहीं है।
मेटलफ्रॉग

1

उपरोक्त सुझावों को आजमाने के बाद, मेरे लिए काम करने वाली एकमात्र चीज सीमा विशेषता को एक बच्चे के विषय के style.css के निम्नलिखित खंडों में "0" में बदल रही थी (प्रत्येक को खोजने के लिए "ढूँढें" ऑपरेशन करें - निम्नलिखित केवल हैं स्निपेट):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

इस प्रकार बाद में इस तरह दिखना:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

0

border: 0px; border-collapse: collapse;तालिका तत्व की शैली को असाइन करने का प्रयास करें ।


3
@ जोश नहीं है border: none?
डग नेयनेर

@DougNeiner पुरानी पोस्ट, लेकिन कोई भी और 0 दोनों समान रूप से मान्य नहीं हैं। मुझे 0 पसंद है क्योंकि मुझे कम टाइप करना है :)
स्कॉट सिमोंटिस

-1

कभी-कभी क्लीयर करने के बाद भी border

कारण यह है कि आपके पास छवियां हैं td, जिससे छवियां display:blockइसे हल करती हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.