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


178

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

मैंने मेज और ट्रे और 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>

जवाबों:


85

इस CSS रीसेट को अपने CSS कोड में जोड़ें: ( यहाँ से )

/* 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;
}

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


15
अगर आप यह कहते हुए पढ़ते हैं कि एक टिप्पणी है: / * टेबल को अभी भी मार्कअप * में 'सेलस्पेसिंग = "0" की आवश्यकता है /
easwee

2
यदि आप अपने पृष्ठ में बहुत सी सीएसएस का उपयोग कर रहे हैं और आप इसे रीसेट नहीं करना चाहते हैं तो क्या होगा?
सातवार्ता

किसी रीसेट या किसी प्रकार की रूपरेखा का उपयोग करना और वहां से निर्माण करना शायद सबसे अच्छा अभ्यास है। हालाँकि इस मामले में आपको प्रत्येक शैली को रीसेट करना होगा। तालिका {गद्दी: 0px; सीमा: 0px; सीमा-पतन: पतन; आदि} .... चेकआउट quirksmode.org/css/tables.html अधिक के लिए।
vectran

आप उनमें से बहुत से को छोड़ सकते हैं क्योंकि यह केवल तालिकाओं के लिए है।
काई हैयांग

31
यह अत्यधिक है, इस सवाल का जवाब नहीं देता है, और एक पूर्ण रीसेट भी नहीं है। शायद प्रासंगिक कोड को अलग कर दें, उसे समझाएं और फिर रीसेट का उपयोग करने का सुझाव दें।
सैंडी गिफ्फोर्ड

198

Vectran के जवाब में जोड़ना: आपको cellspacingक्रॉस-ब्राउज़र संगतता के लिए तालिका तत्व पर विशेषता भी सेट करना होगा ।

<table cellspacing="0">

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

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

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

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

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>


68

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

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

55

Td में छवियों के लिए, छवियों के लिए इसका उपयोग करें:

display: block;

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


9

बस के लिए, याकूब के जवाब के शीर्ष पर जोड़ने imgमें td,

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

यह जीमेल सहित अधिकांश ईमेल क्लाइंट के लिए काम करता है। लेकिन आउटलुक नहीं। आउटलुक के लिए, आपको दो कदम और करने की आवश्यकता है:

table {border-collapse: collapse;}

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

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

8
table 
{
    border-collapse: collapse;
}

सभी स्तंभों को अलग कर तालिका स्तंभों को अलग किया जाएगा ...

या कोशिश करो

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

सभी सेल रिक्ति को 0 और बॉर्डर रिक्ति 0 को समान प्राप्त करने के लिए करें।

मजे करो!


1
<table cellspacing="0" border-spacing: 0;>अमान्य मार्कअप है! <table cellspacing="0" style="border-spacing: 0;">सही होगा
डिर्क वॉन ग्रुनजेन

8

मानकों के अनुरूप HTML5 तालिकाओं में छवियों के बीच सभी स्थान को हटाने के लिए यह सभी सीएसएस जोड़ें:

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

5

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

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}

4

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


4

मुझे बस इतना करना था:

line-height: 0px;

मेरे में

<tr ...>

अन्य उत्तर हैं जो ओपी के प्रश्न प्रदान करते हैं, और उन्हें कुछ समय पहले पोस्ट किया गया था। उत्तर पोस्ट करते समय, कृपया सुनिश्चित करें कि आप या तो एक नया समाधान जोड़ते हैं, या काफी बेहतर व्याख्या करते हैं, खासकर पुराने प्रश्नों का उत्तर देते समय।
help-info.de

1

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

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

सीएसएस को संशोधित करने के लिए उचित सीमा गुण सेट करने के लिए काम नहीं किया जब तक कि मैंने उपरोक्त पंक्ति को नहीं जोड़ा


यह केवल एक चीज है जो मेरे लिए काम करती है! +1 और धन्यवाद! मैंने इसे संक्रमणकालीन के बजाय स्ट्रिक्ट करने के लिए सेट किया था।
स्कॉट बिग्स

0

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

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

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


एक colspan के साथ टीआर को हटाने से कुछ नहीं होता है। पैडिंग और मार्जिन को जोड़ने से या तो कुछ नहीं होता है
Zach Galant

0

मुझे यह समस्या थी और कई पदों में से किसी भी सुझाव ने काम नहीं किया, मैंने उन सभी की कोशिश की। मेरी समस्या यह थी कि मैं जो तालिका बना रहा था, वह किसी अन्य तालिका में नेस्टेड है, जो इसके गुणों पर आधारित है। मुझे कंटेनर तालिका को ओवरराइड करने की आवश्यकता थी।

इस उदाहरण में, SuColTable तालिका पर वर्ग है।

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

बॉर्डर-पतन, बॉर्डर: कोई नहीं और बॉर्डर-स्पेसिंग टेबल / रो / कॉलम लाइन से छुटकारा दिलाता है। पेडिंग 0 कॉल्स को कंटेनर टेबल से पैडिंग से छुटकारा मिलता है। कंटेनर तालिका शैलियों को ओवरराइड करने के लिए मुझे इसमें हर शैली पर काम करना शामिल था।

मेरे पास पैडिंग_टॉप, लेफ्ट और बॉटम (केवल पैडिंग के बजाय) है क्योंकि मेरे पास दो अन्य कक्षाएं हैं जो पैडिंग_ राइट को नियंत्रित करती हैं।

line-height: 0px;

लाइन-ऊंचाई शून्य पंक्ति को एक पंक्ति ऊँची बनाती है। यदि आपके पास कई लाइनें हैं, तो उन्हें एक पंक्ति में संकुचित किया जाता है।


-2

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>


अन्य उत्तर हैं जो ओपी के प्रश्न प्रदान करते हैं, और वे कुछ समय पहले पोस्ट किए गए थे। उत्तर पोस्ट करते समय, कृपया सुनिश्चित करें कि आप या तो एक नया समाधान जोड़ते हैं, या काफी बेहतर व्याख्या करते हैं, खासकर पुराने प्रश्नों का उत्तर देते समय।
help-info.de
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.