दिलचस्प पोस्ट
SQL सर्वर: MAX (DATE) के साथ केवल पंक्तियां चुनें DELETE व्यवहार पर MySQL का डिफ़ॉल्ट क्या है? PostgreSQL में कई-से-कई रिश्तों को कैसे कार्यान्वित करें? X86 (-64) पर हस्ताक्षर किए गए और हस्ताक्षर किए गए गुणा करने के लिए अलग-अलग निर्देश क्यों हैं? जावास्क्रिप्ट के साथ अपलोड करने से पहले छवि चौड़ाई और ऊंचाई की जांच करें मर्क्यूरिअल में रिहाई की शाखाएं प्रबंधित करना जावास्क्रिप्ट में विरासत का प्रदर्शन करना एंड्रॉइड स्टूडियो में जेक्सएक्सिंग को एकीकृत करें क्या एक्लिप्स के साथ एंड्रॉइड के लिए ग्रैडल बिल्ड सिस्टम का उपयोग करना संभव है? अजगर में फिर से यूनिकोड इमोजी को हटा दें मैं अपने नंगे रेपो को कैसे अपडेट कर सकता हूं? सी ++: अस्थायी तर्कों का जीवन काल? JFrame बनाम इसे कार्यक्रम के अंदर बनाते हैं DownloadManager का उपयोग करते हुए गतिविधि के अंदर प्रगति डाउनलोड करें दिखाएं (शून्य) स्क्रॉलबार के बिना स्क्रीन की चौड़ाई कैसे प्राप्त करें?

तालिका में पंक्तियों और स्तंभों के बीच अवांछित अंतरिक्ष कैसे निकालें?

मैं तालिका में पंक्तियों और स्तंभों के बीच अतिरिक्त स्थान कैसे निकालूं?

मैंने मार्जिन, पैडिंग और टेबल पर विभिन्न सीमाओं के गुणों को बदलने और tr और td को बदलने की कोशिश की है।

मैं सभी चित्रों को एक बड़ी छवि की तरह दिखने के लिए एक-दूसरे के पास सही होना चाहता हूं।

मुझे इसे कैसे ठीक करना चाहिए?

सीएसएस

table { border-collapse: collapse; } 

एचटीएमएल

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tera Byte Video Game Creation Camp</title> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <table class="mytable" align="center"> <tr class="header"> <td colspan="3"><img src="images/home_01.png" /></td> </tr> <tr class="top"> <td colspan="3"><img src="images/home_02.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_03.png" /></td> <td><img src="images/home_04.png" /></td> <td><img src="images/home_05.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_07.png" /></td> <td><img src="images/home_06.png" /></td> <td><img src="images/home_08.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_09.png" /></td> <td><img src="images/home_10.png" /></td> <td><img src="images/home_11.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_12.png" /></td> <td><img src="images/home_13.png" /></td> <td><img src="images/home_14.png" /></td> </tr> <tr class="bottom"> <td colspan="3"><img src="images/home_15.png" /></td> </tr> </table> </body> </html> 

वेब के समाधान से एकत्रित समाधान "तालिका में पंक्तियों और स्तंभों के बीच अवांछित अंतरिक्ष कैसे निकालें?"

इस सीएसएस को अपने सीएसएस कोड पर रीसेट करें: ( यहां से )

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 

यह सीएसएस प्रभावी रूप से रीसेट करेगा, पैडिंग और मार्जिन से छुटकारा पाता है।

वेक्ट्रान के उत्तर में जोड़ना: आपको क्रॉस-ब्राउज़र संगतता के लिए तालिका तत्व पर cellspacing एट्रिब्यूट सेट cellspacing

 <table cellspacing="0"> 

संपादित करें (पूर्णता के लिए मैं इस 5 साल बाद विस्तार कर रहा हूं :):

इंटरनेट एक्सप्लोरर 6 और इंटरनेट एक्सप्लोरर 7 को आप सीधे एक टेबल विशेषता के रूप में सेलस्पेसिंग सेट करने के लिए आवश्यक थे, अन्यथा रिक्त स्थान गायब नहीं होता।

इंटरनेट एक्सप्लोरर 8 और बाद के संस्करणों और लोकप्रिय ब्राउज़रों के अन्य सभी संस्करण – क्रोम, फ़ायरफ़ॉक्स, ओपेरा 4+ – सीएसएस गुण सीमा-रिक्ति का समर्थन करें।

तो एक क्रॉस-ब्राउज़र तालिका सेल रिक्त स्थान रीसेट (आईआई 6 को डायनासोर ब्राउज़र के रूप में समर्थन करने के लिए) बनाने के लिए, आप नीचे दिए गए कोड नमूने का पालन कर सकते हैं:

 table{ border: 1px solid black; } table td { border: 1px solid black; /* Style just to show the table cell boundaries */ } table.no-spacing { border-spacing:0; /* Removes the cell spacing via CSS */ border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */ } 
 <p>Default table:</p> <table> <tr> <td>First cell</td> <td>Second cell</td> </tr> </table> <p>Removed spacing:</p> <table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 --> <tr> <td>First cell</td> <td>Second cell</td> </tr> </table> 

यह मेरे लिए काम किया:

 #table { border-collapse: collapse; border-spacing: 0; } 

टीडी में छवियों के लिए, इसका इस्तेमाल चित्रों के लिए करें:

 display: block; 

यह मेरे लिए अवांछित स्थान को हटा देता है

 table { border-collapse: collapse; } 

टेबल कॉलम को अलग करने वाली सभी सीमाएं गिर जाएगी …

या कोशिश करो

 <table cellspacing="0" style="border-spacing: 0;"> 

ऐसा करने के लिए सभी सेल-स्पेसिंग 0 और सीमा रिक्ति 0 करें।

मजे करो!

मानकों के लिए अनुकूल एचटीएमएल 5 टेबल में छवियों के बीच सभी स्थान को हटाने के लिए इस सीएसएस को जोड़ दें:

 table { border-spacing: 0; border-collapse: collapse; } td { padding:0px; } td img { display:block; } 

बस जेकब के उत्तर में जोड़ने, td में td ,

 body {line-height: 0;} img {display: block; vertical-align: bottom;} 

यह ईमेल सहित अधिकांश ईमेल क्लाइंट के लिए काम करता है लेकिन आउटलुक नहीं दृष्टिकोण के लिए, आपको दो चरण अधिक करना होगा:

 table {border-collapse: collapse;} 

और प्रत्येक td तत्वों को एक ही height और width रूप में width जैसा कि इसके निहित चित्र हैं उदाहरण के लिए,

 <td width="600" height="80" style="line-height: 80px;"> <img height="80" src="http://img.hiwab.com/html/Nature_01.jpg" width="600" /> </td> 

सेलपैडिंग और कोशिकाओं को 0 पर सेट करने से पंक्तियों और स्तंभों के बीच अनावश्यक स्थान निकलेगा …

इसे इस्तेमाल करे,

 table{ border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th{ padding: 0; /* 'cellpadding' equivalent */ } 

फ़ाइल की शुरुआत में इस पंक्ति को जोड़ने के लिए मेरे लिए काम किया है:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

उचित सीमा गुण सेट करने के लिए सीएसएस को संशोधित करने तक काम नहीं किया I

क्या आपने टीआरएस को निकालने का प्रयास किया है, जो कि एक colspan है और देखें कि क्या यह कुछ भी बदलता है?

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

इसके अलावा आपकी style.css पूरी तरह प्रतीत नहीं होती है, शायद वहां कुछ गड़बड़ है? मैं कम से कम padding: 0; margin: 0; padding: 0; margin: 0; तालिका (या "mytable" वर्ग के लिए) सुनिश्चित करें कि आपकी छवियों में रिक्त स्थान और / या सीमाएं भी नहीं हैं (उदाहरण के लिए अपने स्टाइलशीट में img { border: 0; } जोड़कर)