Макет таблиці CSS: чому рядок таблиці не приймає поля?

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

Моє запитання стосується рядка, позначеного HEREв CSS. Я виявив, що рядки занадто близько один до одного, тому спробував додати нижнє поле, щоб розділити їх. На жаль, це не працює. Мені потрібно додати поля до комірок таблиці, щоб розділити рядки.

У чому причина такої поведінки?

Крім того, чи можна використовувати цю стратегію для виконання макетування, як я це роблю:

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

чи є краща стратегія?

Див. Стандарт CSS 2.1, розділ 17.5.3. Коли ви використовуєте display:table-row, висота DIV визначається виключно висотою table-cellелементів у ньому. Таким чином, поля, відступи та висота на ці елементи не впливають.

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

Як це для роботи (з використанням фактичної таблиці)?

table {
    border-collapse: collapse;
}

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

Це не настільки динамічно, оскільки вам потрібно чітко встановити колір кордону (якщо немає способу обійти це теж), але це те, з чим я експериментую над власним проектом.

Відредагуйте, щоб включити коментарі щодо transparent:

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

Найближчим, що я бачив, було б встановити border-spacing: 0 30px;контейнер div. Однак це просто залишає мені місце на верхньому краю столу, що перешкоджає меті, оскільки ви хотіли маржу-дна.

Ви пробували встановити нижнє поле .row div, тобто ваші "клітинки"? Коли ви працюєте з фактичними таблицями HTML, ви також не можете встановлювати поля для рядків - лише для комірок.

Для цього існує досить просте виправлення, атрибути border-spacingта border-collapseCSS працюють display: table.

Ви можете використовувати наступне, щоб отримати відступ / поля у клітинках.

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

Зверніть увагу, що ви повинні мати

border-collapse: separate;

Інакше це не спрацює.

Скрипка

 .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

це може бути іншим рішенням

Додайте інтервал проміжку між двома елементами, а потім зробіть його невидимим:

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

.spacer {
    visibility: hidden
}

Працює - додайте інтервал до таблиці

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

додавання тегу br між працюючими divs. додати тег br між двома div, які є display: table-row у батьківському з display: table