html - सीएसएस में सेलपैडिंग और सेलस्पेसिंग सेट करें?

चूक

ब्राउज़र का डिफ़ॉल्ट व्यवहार बराबर है:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

सेल और सेल दीवार की सामग्री के बीच की जगह सेट करता है

table {border-collapse: collapse;}
td    {padding: 6px;}

cellspacing

टेबल कोशिकाओं के बीच की जगह को नियंत्रित करता है

table {border-spacing: 2px;}
td    {padding: 0px;}

दोनों

table {border-spacing: 2px;}
td    {padding: 6px;}

दोनों (विशेष)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

नोट: यदि border-spacing सेट है, तो यह इंगित करता है कि तालिका की border-collapse संपत्ति separate ।

यह अपने आप का प्रयास करें!

Here आप इसे प्राप्त करने का पुराना HTML तरीका ढूंढ सकते हैं।

TBH। सीएसएस के साथ सभी fannying के लिए आप cellpadding="0" cellspacing="0" कर सकते हैं क्योंकि वे बहिष्कृत नहीं हैं ...

<td> के स्पष्ट रूप से मार्जिन का सुझाव देने वाले किसी और ने इसका प्रयास नहीं किया है।

इस समस्या का सरल समाधान है:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

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

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

या इसे आजमाएं:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

एक HTML तालिका में, cellpadding और cellspacing इस तरह सेट किया जा सकता है:

सेल-पैडिंग के लिए : बस सरल td/th सेल padding कॉल करें

पूर्व:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

सेल-स्पेसिंग के लिए

बस सरल table border-spacing कॉल करें

पूर्व:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

सीएसएस स्रोत लिंक द्वारा अधिक टेबल शैली यहां आपको सीएसएस द्वारा अधिक टेबल शैली मिलती है

एक div के साथ सेल की सामग्री लपेटें और आप जो कुछ भी चाहते हैं वह कर सकते हैं, लेकिन आपको एक समान प्रभाव प्राप्त करने के लिए प्रत्येक सेल को कॉलम में लपेटना होगा। उदाहरण के लिए, व्यापक बाएं और दाएं मार्जिन प्राप्त करने के लिए:

तो सीएसएस होगा,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

हाँ, यह एक परेशानी है। हाँ, यह आईई के साथ काम करता है। वास्तव में, मैंने केवल आईई के साथ इसका परीक्षण किया है, क्योंकि यह सब हमें काम पर उपयोग करने की अनुमति है।

टेबल सेलस्पेसिंग और सेलपैडिंग के लिए एचटीएमएल 5 में अप्रचलित हैं। अब सेलस्पेसिंग के लिए आपको सीमा-अंतर का उपयोग करना होगा और सेलपैडिंग के लिए आपको सीमा-पतन का उपयोग करना होगा।

और सुनिश्चित करें कि आप इसका उपयोग अपने HTML5 कोड में नहीं करते हैं। हमेशा इन मानों का उपयोग सीएसएस -3 फ़ाइल में करने का प्रयास करें।

डब्ल्यू 3 सी वर्गीकरण से जो मैं समझता हूं उससे यह है कि <table> एस केवल 'डेटा' प्रदर्शित करने के लिए हैं।

उस पर आधारित मैंने पृष्ठभूमि के साथ एक <div> बनाने के लिए बहुत कुछ पाया और यह सब कुछ है और position: absolute; का उपयोग कर उस पर तैरते डेटा के साथ एक टेबल है position: absolute; और background: transparent; ...

यह क्रोम, आईई (6 और बाद में) और मोज़िला (2 और बाद में) पर काम करता है।

मार्जिन का उपयोग कंटेनर तत्वों, जैसे <table> , <div> और <form> , <tr> , <td> , <span> या <input> जैसे कंटेनर तत्वों के बीच एक स्पेसर बनाने के लिए किया जाता है (या किसी भी तरह से)। कंटेनर तत्वों के अलावा किसी अन्य चीज़ के लिए इसका उपयोग करने से आप भविष्य में ब्राउज़र अपडेट के लिए अपनी वेबसाइट को समायोजित करने में व्यस्त रहेंगे।

मैंने इस्तेमाल किया !important सीमा-पतन के बाद !important

border-collapse: collapse !important;

और यह आईई 7 में मेरे लिए काम करता है। ऐसा लगता है कि सेलस्पेसिंग विशेषता को ओवरराइड करना है।

यह शैली टेबल के लिए पूर्ण रीसेट के लिए है - सेलपैडिंग , सेलस्पेसिंग और सीमाएं ।

मेरी शैली मेरी रीसेट.cएसएस फ़ाइल में थी:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px;/*replace cellpadding*/
}

शैली को सीधे तालिका में जोड़ने के बारे में कैसे? यह आपके सीएसएस में table का उपयोग करने के बजाय है, जो आपके पृष्ठ पर एकाधिक टेबल होने पर एक बीएडी दृष्टिकोण है:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

साथ ही, यदि आप cellspacing="0" , तो border-collapse: collapse जोड़ने के लिए मत भूलना border-collapse: collapse अपनी table की स्टाइलशीट में border-collapse: collapse करें।

border-spacing और padding का उपयोग करके आप बस अपने सीएसएस में ऐसा कुछ कर सकते हैं:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

तालिका डेटा के साथ बस सीएसएस पैडिंग नियमों का उपयोग करें:

td { 
    padding: 20px;
}

और सीमा अंतर के लिए:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

हालांकि, यह बॉक्स मॉडल के diff कार्यान्वयन के कारण इंटरनेट एक्सप्लोरर जैसे ब्राउज़र के पुराने संस्करण में समस्याएं पैदा कर सकता है।

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

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

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding को सीएसएस में padding द्वारा दिया जा सकता है जबकि cell-spacing को टेबल के लिए border-spacing सेट करके सेट किया जा सकता है।

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle

table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

अगर margin काम नहीं करता है, तो block को block करने के लिए सेट सेट करने का प्रयास करें और फिर मार्जिन काम करेगा।