सीएसएस सेल मार्जिन

Question

मेरे HTML दस्तावेज़ में, मेरे पास दो कॉलम और कई पंक्तियों वाली एक तालिका है। मैं सीएसएस के साथ पहले और दूसरे कॉलम के बीच की जगह को कैसे बढ़ा सकता हूं? मैंने "मार्जिन-राइट: 10px;" लागू करने की कोशिश की है बाईं ओर की कोशिकाओं में से प्रत्येक के लिए, लेकिन कोई प्रभाव नहीं।

Comments

यहाँ एक अच्छा CSS समाधान है, नया अपडेट किया गया है: stackoverflow.com/a/21551008/2827823

— Ason

Answer 1

इसे अपने पहले पर लागू करें <td>:

padding-right:10px;

HTML उदाहरण:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Comments

सीमा-पतन का उपयोग करने के लिए यह एक बेहतर दृष्टिकोण होगा: अलग

— गौरव रामानन

यदि कोई व्यक्ति उपरोक्त टिप्पणी को बॉर्डर-पतन तकनीक को कॉपी / पेस्ट कर रहा है, तो यह होना चाहिए border-collapse: separate( separateऊपर की वर्तनी में एक टाइपो था )

— टोनी डायनिटो

इसके अलावा, यदि आप सीमाओं के बीच अंतरिक्ष की मात्रा को परिभाषित करना चाहते हैं, तो आपको उपयोग करना होगाborder-spacing: 5px;

— Sølve Tornøe

border-spacingपंक्तियों के बीच स्थान भी जोड़ता है। दुर्भाग्य से, ऊर्ध्वाधर और क्षैतिज रिक्ति के लिए एक अलग संपत्ति नहीं है।

— ली ब्लेक

border-spacingदो तर्क लेता है - एक क्षैतिज के लिए और एक ऊर्ध्वाधर के लिए।

— OldTinfoil

Answer 2

चेतावनी का एक शब्द: यद्यपि padding-rightआपकी विशेष (दृश्य) समस्या को हल किया जा सकता है, यह तालिका कोशिकाओं के बीच रिक्ति जोड़ने का सही तरीका नहीं है । padding-rightएक सेल के लिए क्या करता है यह अन्य तत्वों के लिए क्या करता है के समान है: यह भीतर स्थान जोड़ता है सेल के । यदि कोशिकाओं में कोई बॉर्डर या बैकग्राउंड कलर या कुछ और नहीं है जो गेम को दूर करता है, तो यह कोशिकाओं के बीच जगह सेट करने के प्रभाव की नकल कर सकता है, लेकिन अन्यथा नहीं।

जैसा कि किसी ने उल्लेख किया है, तालिका कोशिकाओं के लिए मार्जिन विनिर्देशों की अनदेखी की जाती है:

सीएसएस 2.1 विनिर्देश - तालिकाएँ - तालिका सामग्री का दृश्य लेआउट

आंतरिक तालिका तत्व सामग्री और सीमाओं के साथ आयताकार बक्से उत्पन्न करते हैं। कोशिकाओं में पैडिंग भी होती है। आंतरिक तालिका तत्वों में मार्जिन नहीं है।

फिर "सही" तरीका क्या है? यदि आप को बदलना चाहते हैंcellspacing तालिका विशेषता , तो border-spacing( border-collapseअक्षम के साथ ) एक प्रतिस्थापन है। हालांकि, यदि प्रति-सेल "मार्जिन" आवश्यक है, तो मुझे यकीन नहीं है कि सीएसएस का उपयोग करके इसे कैसे सही ढंग से प्राप्त किया जा सकता है। केवल वही हैक जो मैं सोच सकता हूं कि उसका उपयोग करना हैpadding उपरोक्त कोशिकाओं का उपयोग करना, कोशिकाओं की किसी भी स्टाइलिंग (पृष्ठभूमि रंग, सीमाएं, आदि) से बचना और इसके बजाय ऐसे स्टाइल को लागू करने के लिए कोशिकाओं के अंदर कंटेनर DIV का उपयोग करना।

मैं एक सीएसएस विशेषज्ञ नहीं हूं, इसलिए मैं ऊपर में अच्छी तरह से गलत हो सकता हूं (जो जानना बहुत अच्छा होगा! मैं भी टेबल सेल मार्जिन सीएसएस समाधान चाहूंगा)।

चीयर्स!

Comments

यह महान और सभी पैडिंग के लिए है, लेकिन मार्जिन के बारे में क्या? मैं सेल के बाहर जगह जोड़ना चाहता हूं जिसमें एक सीमा होती है। मार्जिन सीएसएस का कोशिकाओं पर कोई प्रभाव नहीं पड़ता है।

— लेविटिकन

लेविटिकॉन, यह सही है - मार्जिन उपरोक्त कारणों से काम नहीं करता है। AFAIK को आप जो चाहते हैं उसे पाने का एकमात्र तरीका है, सेल की सामग्री को DIV में लपेटना, सेल के बजाय उस DIV में मार्जिन और बॉर्डर को जोड़ना ।

— रवि

मैंने बहुत समय पहले एक CSS समाधान पोस्ट किया था (आज इसे अपडेट किया गया): stackoverflow.com/a/21551008/2827823

— Ason

Answer 3

यदि आप पैडिंग का उपयोग नहीं कर सकते हैं (उदाहरण के लिए आपके पास td में सीमाएँ हैं) तो यह कोशिश करें

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

Comments

आप सीमा-ढहने के बारे में अधिक जानकारी प्राप्त कर सकते हैं: यहाँ अलग करें css-tricks.com/almanac/properties/b/border-collapse

— गौरव रमन

Answer 4

मुझे लगता है कि यह काफी प्रमाणित है, लेकिन रिकॉर्ड के लिए, आप ऐसा करने के लिए CSS चयनकर्ताओं का भी उपयोग कर सकते हैं (इनलाइन शैलियों की आवश्यकता को समाप्त कर सकते हैं।) यह CSS हर पंक्ति के पहले कॉलम में पैडिंग लागू करता है:

table > tr > td:first-child { padding-right:10px }

और यह आपका HTML, sans CSS होगा !:

<table><tr><td>data</td><td>more data</td></tr></table>

यह बहुत अधिक सुरुचिपूर्ण मार्कअप की अनुमति देता है, खासकर उन मामलों में जहां आपको सीएसएस के साथ बहुत सारे विशिष्ट स्वरूपण करने की आवश्यकता होती है।

Answer 5

मार्जिन व्यक्तिगत कोशिकाओं पर दुर्भाग्य से काम नहीं करता है, हालांकि आप उन दो कोशिकाओं के बीच अतिरिक्त कॉलम जोड़ सकते हैं जिनके बीच आप एक स्थान रखना चाहते हैं ... एक अन्य विकल्प पृष्ठभूमि के समान रंग के साथ एक सीमा का उपयोग करना है ...

Comments

ऐसा लगता है कि सीमा में गद्दी के समान समस्या है - यह सेल सामग्री और सीमा के बीच स्थान जोड़ता है, सीमा के बाहर नहीं।

— स्टूजेसिक

Answer 6

आप बस इतना कर सकते हैं:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

कोई CSS आवश्यक नहीं है :) यह 10px आपका स्थान है।

Comments

यह अच्छा, सरल और प्रभावी है, मुझे याद दिलाने के लिए धन्यवाद +1

— हेडन थ्रिंग

संरचना और स्टाइल को अलग करने के लिए यह एक अच्छा तरीका नहीं है। यह आवश्यक नहीं है कि सीएसएस की आवश्यकता है या नहीं - सीएसएस का उपयोग इस तरह से कुछ के लिए किया जाना चाहिए।

— साइमन रॉब

नहीं होना चाहिए <td style = "width: 10px;"> </ td>

— रूण जीपसेन

याद रखें, सबसे सरल उपाय सबसे अच्छे हैं। इनलाइन शैली के साथ विधि भी अच्छी है :)

— MrTrebor

यह मेरे विशिष्ट मामले के लिए काम कर रहा है। बहुत रचनात्मक। धन्यवाद

— फान वान लिन्ह

Answer 7

कोशिश करो padding-right। आपको marginकोशिकाओं के बीच लगाने की अनुमति नहीं है।

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

Answer 8

सीमा-पतन का उपयोग करना : अलग; मेरे लिए काम नहीं किया, क्योंकि मुझे केवल तालिका के किनारों के बीच के तालिका कक्षों के बीच में मार्जिन की आवश्यकता है।

मैं अगले समाधान के साथ आया:

- सीएसएस

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

Answer 9

यह समाधान tdदोनों की आवश्यकता है borderऔर paddingस्टाइल के लिए काम करता है।
(क्रोम 32, IE 11, फ़ायरफ़ॉक्स 25 पर परीक्षण किया गया)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

---

अपडेट किया गया 2016

फ़ायरफ़ॉक्स अब इसके बिना inline-blockऔर एक सेट का समर्थन करता हैwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

Comments

इसने सीएसएस टेबल (डिसप्ले: टेबल *) के लिए भी काम किया।

— नेकरेक्स

Answer 10

आप किसी सेल में अलग-अलग कॉलम को उस तरीके से एकल नहीं कर सकते। मेरी राय में, आपका सबसे अच्छा विकल्प style='padding-left:10px'दूसरे कॉलम पर जोड़ना और आंतरिक div या तत्व पर शैलियों को लागू करना है। इस तरह आप अधिक से अधिक स्थान का भ्रम प्राप्त कर सकते हैं।

Answer 11

यदि आपके पास तालिका की चौड़ाई का नियंत्रण है, तो सभी तालिका कक्षों पर एक पैडिंग-बाईं ओर डालें और संपूर्ण तालिका पर एक नकारात्मक मार्जिन-बाईं ओर डालें।

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

ध्यान दें, तालिका की चौड़ाई को पैडिंग / मार्जिन की चौड़ाई शामिल करने की आवश्यकता है। एक उदाहरण के रूप में उपरोक्त का उपयोग करना, तालिका की दृश्य चौड़ाई 700px होगी।

यह सबसे अच्छा समाधान नहीं है यदि आप अपनी तालिका कोशिकाओं पर सीमाओं का उपयोग कर रहे हैं।

Answer 12

उपाय

मुझे इस समस्या को हल करने का सबसे अच्छा तरीका मिला, परीक्षण और त्रुटि का एक संयोजन और यह पढ़ना कि मेरे सामने क्या लिखा गया था:

http://jsfiddle.net/MG4hD/

जैसा कि आप देख सकते हैं कि मेरे पास कुछ बहुत मुश्किल चीजें हैं ... लेकिन यह अच्छा लगने के लिए मुख्य किकर हैं:

PARENT ELEMENT (UL): बॉर्डर-पतन: अलग; सीमा-रिक्ति: .25em; मार्जिन-लेफ्ट: -.25em;
शिशु तत्व (एलआई): प्रदर्शन: टेबल-सेल; ऊर्ध्वाधर-संरेखित करें: मध्य;

एचटीएमएल

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

सीएसएस

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

Answer 13

सीमा के स्थान पर सीमा निर्धारित करने के सियान के समाधान के बाद, मैंने पाया कि आप पृष्ठभूमि से रंग मिलान करने से बचने के लिए सीमा रंग को पारदर्शी पर सेट कर सकते हैं। FF17, IE9, Chrome v23 में काम करता है। एक सभ्य समाधान की तरह लगता है बशर्ते आपको वास्तविक सीमा की भी आवश्यकता न हो।

Answer 14

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

पैडिंग का उपयोग करना सही तरीका नहीं है, यह रूप बदल सकता है लेकिन यह वैसा नहीं है जैसा आप चाहते थे। इससे आपकी समस्या हल हो सकती है।

Comments

यह समाधान पहले से ही पोस्ट किया गया है, एक ही बात कहते हुए 2 उत्तरों की कोई आवश्यकता नहीं है।

— असोन

Answer 15

आप दोनों का उपयोग कर सकते हैं:

padding-right:10px;

padding-right:10%;

लेकिन यह % के साथ उपयोग करना बेहतर है ।

Comments

मैंने उकसाया, लेकिन आपने समझाया होगा कि इसका इस्तेमाल करना बेहतर क्यों है%

— मावग का कहना है कि मोनिका जूल

उत्तरदायी बनाने के लिए सामान्य रूप से% का उपयोग किया जाता है।

— मुहम्मद आवा

प्लस वन - शायद आप ऐसा कहने के लिए अपना उत्तर संपादित कर सकते हैं? ऐसा नहीं है जो पढ़ता है जो टिप्पणियों को पढ़ सकता है .. यदि आप उत्तरदायी डिजाइन के बारे में कुछ के लिए एक कड़ी जोड़ना चाहते हैं, तो भी बेहतर :-)

— मावग का कहना है कि मोनिका

Answer 16

यदि आपके लिए गद्दी काम नहीं कर रही है, तो चारों ओर एक और काम अतिरिक्त कॉलम जोड़ना और चौड़ाई का उपयोग करके मार्जिन सेट करना है <colgroup>। ऊपर दिए गए पैडिंग समाधानों में से कोई भी मेरे लिए काम नहीं कर रहा था, क्योंकि मैं सेल बॉर्डर को खुद को मार्जिन देने की कोशिश कर रहा था, और आखिर में यही समस्या हल हुई:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

तालिका कोशिकाओं की सीमाओं का उपयोग करके शैली बनाएं: nth-child ताकि दूसरा और तीसरा कॉलम एक एकल स्तंभ प्रतीत हो।

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

Comments

यह समस्या का हल है, इसका जवाब नहीं देना। कोई भी यह नहीं सीखेगा कि इसे ठीक से कैसे किया जाए

— मोग कहते