Макет таблицы CSS: почему table-row не принимает поля?

.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. Однако это просто оставляет мне место на верхнем краю таблицы, что противоречит цели, так как вам нужно поле margin-bottom.

Вы пробовали установить нижнее поле на .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;
}

Если вам нужно определенное поле, например 20 пикселей, вы можете поместить таблицу в div.

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

Таким образом, #tableDiv имеет поле 20 пикселей, но сама таблица имеет ширину 100%, заставляя таблицу иметь полную ширину, за исключением полей с обеих сторон.

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

добавление тега br между div сработало. добавить тег br между двумя div, которые отображаются: table-row в родительском элементе с display: table