HTML टेबल से सीमाओं को पूरी तरह से कैसे हटाएं

Question

मेरा लक्ष्य एक HTML पृष्ठ बनाना है जो "फोटो फ्रेम" के समान है। दूसरे शब्दों में, मैं एक रिक्त पृष्ठ बनाना चाहता हूं जो 4 चित्रों से घिरा हो।

यह मेरा कोड है:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

और सीएसएस कक्षाएं निम्नलिखित हैं:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

मेरी समस्या यह है कि मुझे तालिका की कोशिकाओं के बीच पतली सफेद रेखाएं मिल रही हैं, मेरा मतलब है कि चित्रों की सीमा निरंतर नहीं है। मैं इन सफेद स्थानों से कैसे बच सकता हूं?

Answer 1

<table cellspacing="0" cellpadding="0">

और सीएसएस में:

table {border: none;}

संपादित करें: जैसा कि iGEL ने उल्लेख किया है, यह समाधान आधिकारिक तौर पर पदावनत (अभी भी काम करता है) है, इसलिए यदि आप खरोंच से शुरू कर रहे हैं, तो आपको जेएनपीसी के सीमा-पतन समाधान के साथ जाना चाहिए।

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

मुझे यह पसंद आया:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

अब, सीमा के ढहने के साथ, यह काम नहीं करेगा क्योंकि हमेशा एक सीमा हटा दी जाती है। मुझे इसे किसी अन्य तरीके से करना होगा (आईसीसी के अधिक समाधान हैं)। एक संभावना का उपयोग CSS3 बॉक्स-शैडो के साथ किया जाता है:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

तुम भी सिर्फ एक सीमा के साथ "नाली | रिज | इनसेट | आउटसेट" सीमा शैली की तरह कुछ का उपयोग कर सकते हैं। लेकिन मेरे लिए, यह इष्टतम नहीं है, क्योंकि मैं दोनों रंगों को नियंत्रित नहीं कर सकता।

शायद सीमाओं के ढहने का कुछ सरल और अच्छा समाधान है, लेकिन मैंने इसे अभी तक नहीं देखा है और मैंने ईमानदारी से इस पर ज्यादा समय नहीं बिताया है। शायद यहाँ कोई मुझे / हमें दिखा सकेगा;)

Comments

cellspacing और cellpadding 1999 के बाद से पदावनत हैं, developer.mozilla.org/en-US/docs/HTML/Element/table देखें - आपको @jnpcl समाधान के साथ जाना चाहिए।

— आईजीईएल

iGEL सही है, मैंने अपना उत्तर संपादित कर लिया है। ईमानदारी से, मैं आश्चर्यचकित था, कि यह इतने लंबे समय से पदावनत है और मैं अभी भी बिना किसी समस्या के इसका उपयोग कर रहा था :)

— Damb

Answer 2

table {
    border-collapse: collapse;
}

Comments

पूरी तरह से धन्यवाद काम किया

— विकास कंडारी

Answer 3

मेरे लिए मुझे मेज और सभी कोशिकाओं से सीमाओं को पूरी तरह से हटाने के लिए ऐसा कुछ करने की आवश्यकता थी। इसके लिए HTML को बिल्कुल भी संशोधित करने की आवश्यकता नहीं है, जो मेरे मामले में सहायक था।

table, tr, td {
    border: none;
}

Comments

यहाँ तक हर सुझाव की कोशिश की, और अंत border: noneमें tdआश्वस्त jekyll को एक सीमाहीन टेबल बनाने के लिए आवेदन किया :<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">

— Avio

Answer 4

बूटस्ट्रैप वातावरण में शीर्ष उत्तरों में से किसी ने भी मदद नहीं की, लेकिन निम्नलिखित सभी सीमाओं को लागू करते हुए:

.noBorder {
    border:none !important;
}

के रूप में लागू:

<td class="noBorder">

Comments

इस सुझाव ने मेरे लिए Wordpress में काम किया। मुझे सीमा को लागू करने में कठिनाई हो रही थी।

— डकैतप्रिस्ले

Answer 5

बूटस्ट्रैप वातावरण में यहां मेरा समाधान है:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

Answer 6

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

अपने HTML tr टैग में, इसे जोड़ें:

style="border-collapse: collapse; border: none;"

इसने उन सभी सीमाओं को हटा दिया जो तालिका पंक्ति पर दिखाई दे रही थीं।