display: table-cell margins

Question

I have 2 divs as display: table-cell. I need a space between them.

margin-left: 5px for the second div does not work.

I already saw the Why is a div with "display: table-cell;" not affected by margin? answer, but my question is not about how to have a border around a cell, but a LEFT MARGIN (and not padding!) for a concrete cell (the right one)

enter image description here

setting the green div as

display: table;
border-collapse: separate;
border-spacing: 10px;

makes the space not only between cells, but also all around cells, that is NOK...

How to proceed?

JSFiddle: http://jsfiddle.net/9cw7rhpu/

you may fake it http://jsfiddle.net/jf5zt2xh/5/ i voted to reopen this question since ask **how can have this space or margin aside** and not **why is it not happening** — G-Cyrillus, Mar 04 '15 at 13:55
refer to this [post](https://stackoverflow.com/q/18346083/6521116) — LF00, May 18 '21 at 09:18

score 6 · Accepted Answer · answered Mar 04 '15 at 13:49

6

Try to use Flexbox (flexbox) to separate child elements

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

answered Mar 04 '15 at 13:49

kris14an

741
7
24

thanks... Your idea brought me to this solution that is OK for me: http://jsfiddle.net/jf5zt2xh/6/ – serhio Mar 04 '15 at 15:17

score 1 · Answer 2 · answered Mar 04 '15 at 13:51

Do you mean something like that?

div.table {
    border: solid 2px green;
    display: table;
    border-collapse: separate;
    width: 100%;
    height: 100px;
    margin: 10px;
    background-color: aquamarine;
}
div.cell {
    border: solid 4px red;
    display: table-cell;
}
#c1 {
    width: 400px;
    background-color: blue;
}
#c2 {
    width: 200px;
    background-color: magenta;
}

<div class="table">
    <div class="cell" id="c1"></div>
    <div class="cell" id="c2"></div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:15

If you need your divs to have display:table-cell you'll need to use a workaround so achieve what you're looking for, see "Why is a div with “display: table-cell;” not affected by margin?"

Here's a possible idea to set individual margins for table cells:

div {
  border-style:solid;
  border-width:1px;
}

.table {
  display:table;
  border-color:green;
  width:200px;
}

.cell {
  display:table-cell;
  border-style:none;
  width:50%;
}
.cell > div {
  border-color:red;
  height:100px;
}
#c2 > div {
  margin-left:10px;
}

<div class="table">
  <div id="c1" class="cell">
    <div class="inner"></div>
  </div>
  <div id="c2" class="cell">
    <div class="inner"></div>
  </div>
</div>

The drawback here is that you have to put a second div inside your table-cells (additional markup) and give them a margin and border instead of your table-cells.

You may need to figure out a way to adjust the height of the inner divs, they don't automatically adjust their height to each other.

Of course, if you're not worried about IE < 10, flexbox might be a solution.

score 0 · Answer 4 · answered Mar 04 '15 at 15:42

to keep the display:table layout, you may use transparent border and shadow to draw the border:

div.table {
    border:solid;
    border-width:2px;
    border-color: green;
    display: table;
    border-collapse:separate;
    border-spacing:0 5px;
    width: 100%;
    height: 100px;
    margin: 10px;
    background-color: magenta;
}
div.cell {
    border:solid;
    border-width:4px;
    border-color: red;
    display: table-cell;
}
#c1 {
    width: 400px;
    background-color: blue;
    border:0 none;
    background-clip:padding-box;
    border-right:5px solid transparent;
    padding:5px;
    box-shadow:inset  0 0 0 3px red;
}
#c2 {
    width: 200px;
    background-color: magenta;
}

<div class="table">
    <div class="cell" id="c1"></div>
    <div class="cell" id="c2"></div>
</div>

http://jsfiddle.net/jf5zt2xh/4/

score 0 · Answer 5 · answered Jun 30 '18 at 10:15

Try this solution:

HTML:

<div class="table">
  <div class="col">
    Column 1
  </div>
  <div class="col">
    Column 2
  </div>
</div>

CSS:

.table {
    display: table;
    border-collapse: separate;
    border-spacing: 25px; 
    width: calc(100% + 50px); 
    margin-left: -25px;
}
.col {
    display: table-cell;
}

display: table-cell margins

5 Answers5