CSS tablo düzeni: tablo satırı neden bir marj kabul etmiyor?

.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>

Sorum HERECSS'de işaretlenen çizgiye göre . Satırların birbirine çok yakın olduğunu öğrendim, bu yüzden onları ayırmak için bir alt kenar boşluğu eklemeye çalıştım. Maalesef işe yaramıyor. Satırları ayırmak için tablo hücrelerine kenar boşlukları eklemem gerekiyor.

Bu davranışın arkasındaki sebep nedir?

Ayrıca, yaptığım gibi düzenlemeyi gerçekleştirmek için bu stratejiyi kullanmam uygun mudur:

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

yoksa daha iyi bir strateji var mı?

CSS 2.1 standardına bakın, bölüm 17.5.3. Kullandığınızda display:table-row, DIV'nin yüksekliği yalnızca içindeki table-cellöğelerin yüksekliğine göre belirlenir . Bu nedenle, bu öğeler üzerindeki kenar boşluğu, dolgu ve yüksekliğin hiçbir etkisi yoktur.

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

Bu bir çalışma için nasıl (gerçek bir masa kullanarak)?

table {
    border-collapse: collapse;
}

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

O kadar dinamik değil, çünkü sınırın rengini açıkça belirlemeniz gerekiyor (bunun etrafında bir yol yoksa), ama bu benim kendi projem üzerinde denediğim bir şey.

Düzenleme ile ilgili olarak dahil etmek transparent:

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

Gördüğüm en yakın şey border-spacing: 0 30px;, kapsayıcı div'i ayarlamaktır . Bununla birlikte, bu sadece masanın üst kenarında bana bir boşluk bırakıyor, bu da amacı bozuyor, çünkü siz marj-dip istediğinizi.

Alt marjı .row div, yani "hücrelerinize" ayarlamayı denediniz mi? Gerçek HTML tablolarıyla çalışırken, kenar boşluklarını satırlara da ayarlayamazsınız - yalnızca hücrelere.

Bunun için oldukça basit bir düzeltme var, border-spacingve border-collapseCSS özellikleri üzerinde çalışıyor display: table.

Hücrelerinizde dolgu / kenar boşlukları almak için aşağıdakileri kullanabilirsiniz.

.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>

O Not sahip olması

border-collapse: separate;

Aksi takdirde işe yaramayacaktır.

Vaktini boşa harcamak

 .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

bu başka bir çözüm olabilir

İki öğe arasına boşluk aralığı ekleyin, ardından onu görünmez yapın:

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

.spacer {
    visibility: hidden
}

Çalışmalar - Tabloya Aralık Ekleme

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

Belirli bir kenar boşluğu istiyorsanız, örneğin 20px, tabloyu bir div içine koyabilirsiniz.

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

Dolayısıyla #tableDiv'in 20px'lik bir kenar boşluğu vardır, ancak tablonun kendisi% 100'lük bir genişliğe sahiptir ve bu, tabloyu her iki taraftaki kenar boşluğu dışında tam genişlikte olmaya zorlar.

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

div'ler arasına br etiketi eklemek işe yaradı. görüntülenen iki div arasına br etiketi ekleyin: görüntülü bir üst öğedeki tablo satırı: tablo