एचटीएमएल टेबल

Question

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

.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');  
} 

मेरे समस्या यह है कि मैं मेज की कोशिकाओं के बीच पतली सफेद लाइनों हो रही है, मेरा मतलब है:

<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> 

और सीएसएस वर्गों निम्नलिखित हैं:

यह मेरा कोड है कि चित्रों की सीमा निरंतर नहीं है। मैं इन सफेद रिक्त स्थान से कैसे बच सकता हूं?

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> 

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

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

Answer 2

table { 
    border-collapse: collapse; 
} 

/* remove padding */ 
td, th { 
    padding: 0; 
} 

Answer 3

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

table, tr, td { 
    border: none; 
} 

Answer 4

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

.noBorder { 
    border:none !important; 
} 

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

<td class="noBorder"> 

Answer 5

यह क्या समस्या हल हो गई है मैं:

अपने एचटीएमएल टी टैग में, इसे जोड़ें:

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

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

Answer 6

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

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