Layout della tabella CSS: perché la riga della tabella non accetta un margine?

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

La mia domanda è relativa alla riga contrassegnata HEREnel CSS. Ho scoperto che le righe sono troppo vicine tra loro, quindi ho provato ad aggiungere un margine inferiore per separarle. Purtroppo non funziona. Devo aggiungere i margini alle celle della tabella per separare le righe.

Qual è il motivo di questo comportamento?

Inoltre, va bene usare questa strategia per eseguire il layout mentre sto facendo:

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

o c'è una strategia migliore?

Vedere lo standard CSS 2.1, sezione 17.5.3. Quando si utilizza display:table-row, l'altezza del DIV è determinata esclusivamente dall'altezza degli table-cellelementi in esso contenuti. Pertanto, il margine, la spaziatura interna e l'altezza di questi elementi non hanno alcun effetto.

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

Com'è questo per un lavoro intorno (usando una tabella reale)?

table {
    border-collapse: collapse;
}

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

Non è così dinamico, dal momento che devi impostare esplicitamente il colore del bordo (a meno che non ci sia anche un modo per aggirare questo), ma questo è qualcosa che sto sperimentando su un mio progetto.

Modifica per includere commenti riguardanti transparent:

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

La cosa più vicina che ho visto sarebbe impostare border-spacing: 0 30px;il div contenitore. Tuttavia, questo mi lascia solo spazio sul bordo superiore del tavolo, il che vanifica lo scopo, poiché volevi il margine inferiore.

Hai provato a impostare il margine inferiore su .row div, cioè sulle tue "celle"? Quando lavori con tabelle HTML reali, non puoi impostare i margini anche per le righe, ma solo per le celle.

C'è una soluzione piuttosto semplice per questo, border-spacinge gli border-collapseattributi CSS funzionano display: table.

Puoi usare quanto segue per ottenere riempimento / margini nelle tue celle.

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

Si noti che si hanno di avere

border-collapse: separate;

Altrimenti non funzionerà.

Violino

 .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

questa può essere un'altra soluzione

Aggiungi uno spazio distanziatore tra due elementi, quindi rendilo invisibile:

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

.spacer {
    visibility: hidden
}

Funziona - Aggiungi spaziatura alla tabella

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

Se vuoi un margine specifico, ad esempio 20px, puoi inserire la tabella all'interno di un div.

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

Quindi #tableDiv ha un margine di 20px ma la tabella stessa ha una larghezza del 100%, costringendo la tabella ad avere l'intera larghezza eccetto il margine su entrambi i lati.

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

l'aggiunta di un tag br tra i div ha funzionato. aggiungi il tag br tra due div che sono display: table-row in un genitore con display: table