Tata letak tabel CSS: mengapa tabel-baris tidak menerima margin?

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

Pertanyaan saya terkait dengan baris yang ditandai HEREdi CSS. Saya menemukan bahwa baris tersebut terlalu dekat satu sama lain, jadi saya mencoba menambahkan margin bawah untuk memisahkannya. Sayangnya itu tidak berhasil. Saya harus menambahkan margin ke sel tabel untuk memisahkan baris.

Apa alasan dibalik perilaku ini?

Juga, bolehkah menggunakan strategi ini untuk melakukan tata letak seperti yang saya lakukan:

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

atau apakah ada strategi yang lebih baik?

Lihat standar CSS 2.1, bagian 17.5.3. Saat Anda menggunakan display:table-row, ketinggian DIV hanya ditentukan oleh ketinggian table-cellelemen di dalamnya. Jadi, margin, padding, dan tinggi pada elemen tersebut tidak berpengaruh.

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

Bagaimana ini untuk pekerjaan sekitar (menggunakan tabel aktual)?

table {
    border-collapse: collapse;
}

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

Ini tidak dinamis, karena Anda harus secara eksplisit mengatur warna perbatasan (kecuali ada jalan lain juga), tapi ini adalah sesuatu yang saya coba pada proyek saya sendiri.

Edit untuk memasukkan komentar tentang transparent:

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

Hal terdekat yang pernah saya lihat adalah menyetel border-spacing: 0 30px;ke div kontainer. Namun, ini hanya menyisakan saya dengan ruang di tepi atas tabel, yang mengalahkan tujuan, karena Anda menginginkan margin-bottom.

Sudahkah Anda mencoba mengatur margin bawah ke .row div, yaitu ke "sel" Anda? Saat Anda bekerja dengan tabel HTML yang sebenarnya, Anda tidak dapat mengatur margin ke baris juga - hanya ke sel.

Ada perbaikan yang cukup sederhana untuk ini, atribut border-spacingdan border-collapseCSS berfungsi display: table.

Anda dapat menggunakan berikut ini untuk mendapatkan padding / margin di sel Anda.

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

Perhatikan bahwa Anda harus memiliki

border-collapse: separate;

Jika tidak, itu tidak akan berhasil.

Biola

 .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

ini bisa menjadi solusi lain

Tambahkan rentang jarak antara dua elemen, lalu buat tidak terlihat:

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

.spacer {
    visibility: hidden
}

Pekerjaan - Tambahkan Spasi Ke Tabel

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

Jika Anda menginginkan margin tertentu misalnya 20px, Anda dapat meletakkan tabel di dalam div.

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

Jadi #tableDiv memiliki margin 20px tetapi tabel itu sendiri memiliki lebar 100%, memaksa tabel menjadi lebar penuh kecuali margin di kedua sisinya.

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

menambahkan tag br di antara div berhasil. tambahkan tag br di antara dua div yang display: table-row dalam induk dengan display: table