सीएसएस टेबल लेआउट: टेबल-पंक्ति मार्जिन को स्वीकार क्यों नहीं करती है?

Question

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

मेरा प्रश्न HERECSS में चिह्नित लाइन के सापेक्ष है । मुझे पता चला कि पंक्तियाँ एक-दूसरे के बहुत पास हैं, इसलिए मैंने उन्हें अलग करने के लिए नीचे का मार्जिन जोड़ने की कोशिश की। दुर्भाग्य से यह काम नहीं करता है। मुझे पंक्तियों को अलग करने के लिए तालिका कोशिकाओं में मार्जिन जोड़ना होगा।

इस व्यवहार के पीछे क्या कारण है?

इसके अलावा, लेआउट बनाने के लिए इस रणनीति का उपयोग करना ठीक है जैसा कि मैं कर रहा हूं:

[icon] - text      [icon] - text
[icon] - text      [icon] - text

या कोई बेहतर रणनीति है?

Comments

यदि आप पंक्तियों के बीच जगह चाहते हैं, तो home_4 में पैडिंग-बॉटम जोड़ें।

— सतबीर किरा

Answer 1

CSS 2.1 मानक, खंड 17.5.3 देखें। जब आप उपयोग करते हैं display:table-row, तो DIV की ऊंचाई पूरी तरह से इसमें table-cellतत्वों की ऊंचाई से निर्धारित होती है। इस प्रकार, उन तत्वों पर मार्जिन, पैडिंग और ऊंचाई का कोई प्रभाव नहीं है।

http://www.w3.org/TR/CSS2/tables.html

Answer 2

आस-पास के काम के लिए यह कैसा है (वास्तविक तालिका का उपयोग करके)?

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

यह उतना गतिशील नहीं है, क्योंकि आपको स्पष्ट रूप से सीमा का रंग निर्धारित करना है (जब तक कि इसके आस-पास भी कोई रास्ता नहीं है), लेकिन यह एक ऐसी चीज है जिसे मैं अपने स्वयं के प्रोजेक्ट पर प्रयोग कर रहा हूं।

टिप्पणियों को शामिल करने के लिए संपादित करेंtransparent :

tr.row {
    border-bottom: 30px solid transparent;
}

Comments

रंग के रूप में 'सफेद' के बजाय 'पारदर्शी' का प्रयास करें।

— लेंड्रिक

यह मेरे लिए पूरी तरह से काम करता है, यहां तक ​​कि टेबल के पतन के बिना भी, बस टेबल-सेल में पारदर्शी सीमा जोड़ने के लिए! धन्यवाद !

— इगोर लास्ज़लो

Answer 3

निकटतम चीज जो मैंने देखी border-spacing: 0 30px;है वह कंटेनर डिव पर सेट होगी । हालाँकि, यह मुझे तालिका के ऊपरी किनारे पर जगह के साथ छोड़ देता है, जो इस उद्देश्य को हरा देता है, क्योंकि आप मार्जिन-बॉटम चाहते थे।

Comments

इसके अलावा, आप कोशिश कर सकते हैंline-height

— रहेल हसन

आप के साथ ऊपर और नीचे रिक्त स्थान निकाल सकते हैं margin: -30px 0।

— सांग्युन ली

इन सभी वर्कअराउंड में से, बॉर्डर-स्पेसिंग सबसे शब्दार्थ विकल्प की तरह लगता है। धन्यवाद!

— पीकमेंडर 2

Answer 4

क्या आपने .row divअपने "सेल" के लिए नीचे का मार्जिन सेट करने की कोशिश की है ? जब आप वास्तविक HTML तालिकाओं के साथ काम करते हैं, तो आप मार्जिन को पंक्तियों में सेट नहीं कर सकते हैं, वह भी केवल कक्षों तक।

Comments

दुर्भाग्य से, यह काम नहीं किया। केवल "पैडिंग" से डिव को प्रभावित किया जा सकता है display: table। हालांकि, यह मार्जिन के समान नहीं है ...

— जूलियन एच। लैम

Answer 5

इसके लिए एक बहुत ही सरल सुधार है, border-spacingऔर border-collapseCSS विशेषताएँ काम करती हैं display: table।

आप अपनी कोशिकाओं में पैडिंग / मार्जिन प्राप्त करने के लिए निम्नलिखित का उपयोग कर सकते हैं।

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
    <div class="home_3">Foo</div>
    <div class="home_4">Foo</div>
  </div>

  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
  </div>
</div>

ध्यान दें कि आपके पास होना चाहिए

border-collapse: separate;

अन्यथा यह काम नहीं करेगा।

Comments

यह एक आकर्षण की तरह काम करता है, लेकिन एकमात्र समस्या यह है कि जैसे ही मैं सीमा-अलग लागू करता हूं यह सीमा को पंक्ति से हटा देता है, मैंने सीमा पर सीमा का उपयोग सीमा-तल के रूप में किया था: 1px ठोस # 000, कोई विचार?

— अब्बास

Answer 6

बेला

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

यह एक और उपाय हो सकता है

Answer 7

दो तत्वों के बीच स्पेसर स्पैन जोड़ें, फिर इसे अविभाज्य बनाएं:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

Answer 8

वर्क्स - तालिका में रिक्ति जोड़ें

#options table {
  border-spacing: 8px;
}

Answer 9

divs के बीच एक br टैग जोड़कर काम किया। प्रदर्शन के बीच माता-पिता के बीच दो टैग जोड़ें: तालिका-पंक्ति प्रदर्शन वाले माता-पिता में: तालिका