Układ tabeli CSS: dlaczego wiersz tabeli nie akceptuje marginesu?

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

Moje pytanie dotyczy linii zaznaczonej HEREw CSS. Okazało się, że rzędy są zbyt blisko siebie, więc spróbowałem dodać dolny margines, aby je rozdzielić. Niestety to nie działa. Muszę dodać marginesy do komórek tabeli, aby oddzielić wiersze.

Jaki jest powód takiego zachowania?

Ponadto, czy mogę użyć tej strategii do tworzenia układu, tak jak ja:

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

czy jest lepsza strategia?

Zobacz standard CSS 2.1, rozdział 17.5.3. Kiedy używasz display:table-row, wysokość DIV jest określana wyłącznie przez wysokość zawartych w nim table-cellelementów. W związku z tym margines, dopełnienie i wysokość tych elementów nie mają żadnego wpływu.

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

Jak to jest obejść (przy użyciu rzeczywistej tabeli)?

table {
    border-collapse: collapse;
}

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

Nie jest tak dynamiczny, ponieważ musisz wyraźnie ustawić kolor obramowania (chyba że jest na to sposób), ale jest to coś, z czym eksperymentuję w moim własnym projekcie.

Edytuj, aby uwzględnić komentarze dotyczące transparent:

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

Najbliższą rzeczą, jaką widziałem, byłoby ustawienie border-spacing: 0 30px;elementu div kontenera. Jednak to pozostawia mi tylko miejsce na górnej krawędzi stołu, co mija się z celem, ponieważ chciałeś marginesu na dole.

Czy próbowałeś ustawić dolny margines na .row divnp. Swoje „komórki”? Podczas pracy z rzeczywistymi tabelami HTML nie można również ustawiać marginesów w wierszach - tylko w komórkach.

Jest na to dość prosta poprawka, działają atrybuty border-spacingi border-collapseCSS display: table.

Możesz użyć poniższego, aby uzyskać dopełnienie / marginesy w swoich komórkach.

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

Należy pamiętać, że muszą mieć

border-collapse: separate;

W przeciwnym razie to nie zadziała.

Skrzypce

 .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

to może być inne rozwiązanie

Dodaj odstęp dystansowy między dwoma elementami, a następnie spraw, aby był niewidoczny:

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

.spacer {
    visibility: hidden
}

Działa - dodaj odstępy do tabeli

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

Jeśli chcesz mieć określony margines, np. 20px, możesz umieścić tabelę wewnątrz div.

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

Więc #tableDiv ma margines 20px, ale sama tabela ma szerokość 100%, co powoduje, że tabela ma pełną szerokość, z wyjątkiem marginesów po obu stronach.

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

dodanie znacznika br między elementami div zadziałało. dodaj znacznik br między dwoma elementami div, które są display: table-row w elemencie nadrzędnym z display: table