CSS-таблица: почему таблица-строка не принимает маржу?

Ответ 1

См. стандарт CSS 2.1, раздел 17.5.3. Когда вы используете display:table-row, высота DIV определяется только высотой элементов table-cell. Таким образом, маржа, отступы и высота по этим элементам не влияют.

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

Ответ 2

Как это обойти (используя реальную таблицу)?

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;
}

Ответ 3

Самое близкое, что я видел, это установить border-spacing: 0 30px; в контейнер div. Тем не менее, это просто оставляет меня на верхнем краю стола, что побеждает цель, так как вы хотели получить снизу.

Ответ 4

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

Ответ 5

Это довольно простое решение: CSS-атрибуты border-spacing и border-collapse работают на 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>

Ответ 6

Fiddle

 .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

это может быть другое решение

Ответ 7

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

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

.spacer {
    visibility: hidden
}

Ответ 8

Работы - добавить интервал в таблицу

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

Ответ 9

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