Mise en page des tableaux CSS : pourquoi table-row n'accepte-t-il pas de marge ?

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>

Ma question porte sur la ligne marquée HERE dans le CSS. Je me suis rendu compte que les lignes étaient trop proches les unes des autres, et j'ai donc essayé d'ajouter une marge inférieure pour les séparer. Malheureusement, cela ne fonctionne pas. Je dois ajouter les marges aux cellules du tableau pour séparer les lignes.

Quelle est la raison de ce comportement ?

Par ailleurs, est-il possible d'utiliser cette stratégie pour effectuer une mise en page comme je le fais :

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

ou existe-t-il une meilleure stratégie ?

Answer 1

Violon

 .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

Ceci peut être une autre solution

Answer 2

Ajouter une travée d'espacement entre deux éléments, puis la rendre invisible :

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

.spacer {
    visibility: hidden
}

Answer 3

Works - Ajouter un espacement au tableau

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

Answer 4

Si vous souhaitez une marge spécifique, par exemple 20px, vous pouvez placer le tableau à l'intérieur d'une div.

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

Ainsi, le #tableDiv a une marge de 20px mais le tableau lui-même a une largeur de 100 %, ce qui oblige le tableau à prendre toute la largeur à l'exception de la marge de chaque côté.

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

Answer 5

L'ajout d'une balise br entre les divs a fonctionné. l'ajout d'une balise br entre deux divs qui sont display:table-row dans un parent avec display:table