пробел между div - отображение таблицы-ячейки

97

У меня есть два div:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

Есть ли способ освободить место между этими двумя div (имеющими display:table-cell)?

Система-x32z
источник

Ответы:

192

Вы можете использовать border-spacingнедвижимость:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

Демо JSBin

Любой другой вариант?

Ну не совсем так.

Зачем?

  • marginсвойство не применимо к display: table-cellэлементам.
  • padding свойство не создает пространство между краями ячеек.
  • floatСвойство разрушает ожидаемое поведение table-cellэлементов, которые могут достигать высоты их родительского элемента.
Хашем Колами
источник
Любой другой вариант? Конечно position: relative.
Jongosi
@Jongosi Согласно спецификации : Влияние position: relativeна table-*-group, table-row, table-column, table-cell, и table-captionэлементы , не определен.
Hashem Qolami
3
Вы также можете создать одностороннюю границу того же цвета, что и фон. border-right: 10px solid #FFF. Это хорошо сработало для меня при разработке раскрывающегося меню CSS, когда мне нужно было немного места между table-cellэлементами.
armadadrive
1
Вы также можете добавлять ячейки исключительно для разнесения. Не идеально, но, по крайней мере, вы избежите головной боли, связанной с попыткой отключить интервал между границами в самой правой ячейке.
Daniel
Я также хотел, чтобы «отступы» находились только на одном краю «ячейки», поэтому мне пришлось использовать решение armadadrive, за исключением того, что я использовал цвет границы rgba (0,0,0,0) для прозрачной границы, поэтому я не нужно беспокоиться о цвете / изображении фона. border-right: сплошной rgba 10 пикселей (0,0,0,0);
JAX
20

По возможности используйте прозрачные границы.

Демо JSFiddle

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

Объяснение

Вы можете использовать это border-spacingсвойство, как предполагает принятый ответ, но это не только создает пространство между ячейками таблицы, но также между ячейками таблицы и контейнером таблицы. Это может быть нежелательно.

Если вам не нужны видимые границы на ячейках таблицы, вы должны использовать transparentграницы для создания полей ячеек. Прозрачные границы требуют настройки, background-clip: padding-box;иначе цвет фона ячеек таблицы будет отображаться на границе.

Прозрачные границы и фоновый клип поддерживаются в IE9 и выше (и во всех других современных браузерах). Если вам нужна совместимость с IE8 или не нужно фактическое прозрачное пространство, вы можете просто установить белый цвет границы и background-clipне использовать.

Максимум
источник
Установки 'border-right' на самом деле достаточно, чтобы обеспечить пространство между ними, объявление «таблицы» не требуется.
Forsberg
0
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>
jalalBK
источник
0

Что ж, все вышеперечисленное работает, вот мое решение, которое требует немного меньше разметки и является более гибким.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}
<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

Гарет Кларк
источник
-6

Создайте новый div с любым именем (я просто использую разделение таблицы) и задайте ему ширину, не добавляя к нему содержимое, при этом поместив его между необходимыми div, которые необходимо разделить.

Вы можете добавить любую ширину, которую сочтете нужной. Я просто использовал 0,6%, потому что это то, что мне было нужно, когда мне приходилось это делать.

.table-split {
  display: table-cell;
  width: 0.6%
}
<div class="table-split"></div>

Анон
источник
10
Это ужасное решение.
1
Это была обычная стратегия, когда фактические элементы таблицы использовались для целей макета, и отчасти причина того, что методология теперь устарела.
rakitin
Поскольку это может быть выполнено только с помощью css, следует избегать использования html
Тони Мишель Каубет