109

I have here two divs:

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

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

Is there a way to make space between these two divs (that have display:table-cell)?

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
System-x32z
  • 1,921
  • 5
  • 20
  • 31

5 Answers5

207

You can use border-spacing property:

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 Demo

Any other option?

Well, not really.

Why?

  • margin property is not applicable to display: table-cell elements.
  • padding property doesn't create space between edges of the cells.
  • float property destroys the expected behavior of table-cell elements which are able to be as tall as their parent element.
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Any other option? Sure, `position: relative`. – Jongosi Jun 16 '14 at 16:42
  • @Jongosi According to [spec](http://www.w3.org/TR/CSS2/visuren.html#propdef-position): *The effect of `position: relative` on `table-*-group`, `table-row`, `table-column`, `table-cell`, and `table-caption` elements is undefined.* – Hashem Qolami Jun 16 '14 at 21:49
  • 3
    You could also create a one-sided border the same colour as the background. `border-right: 10px solid #FFF`. This worked well for me when designing a CSS dropdown menu when I wanted some space between `table-cell` elements. – armadadrive Jan 17 '16 at 18:48
  • 1
    You can also add cells purely for spacing. Not ideal, but at least you avoid the headache of trying to turn off border-spacing on the rightmost cell. – Daniel Jun 07 '16 at 20:16
  • I also wanted the "padding" to be on only 1 edge of the "cell", so I had to use armadadrive's solution except for I used a border color of rgba(0,0,0,0) for a transparent border so I don't have to worry about background color/image. border-right: 10px solid rgba(0,0,0,0); – JAX Sep 30 '18 at 21:55
26

Use transparent borders if possible.

JSFiddle Demo

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

Explanation

You could use the border-spacing property, as the accepted answer suggests, but this not only generates space between the table cells but also between the table cells and the table container. This may be unwanted.

If you don't need visible borders on your table cells you should therefore use transparent borders to generate cell margins. Transparent borders require setting background-clip: padding-box; because otherwise the background color of the table cells is displayed on the border.

Transparent borders and background-clip are supported in IE9 upwards (and all other modern browsers). If you need IE8 compatibility or don't need actual transparent space you can simply set a white border color and leave the background-clip out.

Max
  • 496
  • 5
  • 13
  • The 'border-right' setting is actually enough to provide the space between, no "table" declaring is required. – forsberg Oct 28 '17 at 15:20
1
<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
  • 31
  • 2
0

Well, the above does work, here is my solution that requires a little less markup and is more flexible.

.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>
Gareth Clarke
  • 1
  • 1
-6

Make a new div with whatever name (I will just use table-split) and give it a width, without adding content to it, while placing it between necessary divs that need to be separated.

You can add whatever width you find necessary. I just used 0.6% because it's what I needed for when I had to do this. 

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