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

99

.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

или есть лучшая стратегия?

Стефано Борини
источник
Если вам нужно пространство между строками, добавьте padding-bottom к home_4.
Satbir Kira

Ответы:

83

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

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

Ричардталлент
источник
30

Как это работает (с использованием реальной таблицы)?

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;
}
Маффин
источник
14
Попробуйте использовать в качестве цвета «прозрачный» вместо «белый».
Lendrick
У меня он отлично работает, даже без сворачивания таблицы, просто чтобы добавить прозрачную границу к ячейкам таблицы! Спасибо !
Игорь Ласло
18

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

Джулиан Х. Лам
источник
1
также, вы можете попробоватьline-height
Рахил Хасан 01
1
Вы можете удалить пробелы сверху и снизу с помощью margin: -30px 0.
Sanghyun Lee
Из всех этих обходных путей наиболее семантическим вариантом кажется разделение границ. Спасибо!
Pikamander2
6

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

наивисты
источник
К сожалению, это не сработало. Только "заполнение" может влиять на div с помощью display: table. Однако это не совсем то же самое, что маржа ...
Джулиан Х. Лам
3

Для этого есть довольно простое решение: атрибуты 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;

Иначе не получится.

Крис Бойд
источник
Это работает как шарм, но единственная проблема в том, что как только я применяю разделение границ, оно удаляет границу из строки, я использовал границу в строке как border-bottom: 1px solid # 000, есть идея?
Аббас
0

Скрипка

 .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

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

Мехмет Эрен Йенер
источник
0

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

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

.spacer {
    visibility: hidden
}
напуганный
источник
0

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

#options table {
  border-spacing: 8px;
}
Джейсон
источник
0

Если вам нужно определенное поле, например 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%;
}
я на работе
источник
-2

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

TeT Psy
источник