No border-spacing before first item and after last item

Question

I have a fake table. I use border-spacing property to create a space between them. But this also creates spacing before first cell and after the last cell.

I would like it to create a space only between those two columns.

HTML:

<div class="table">
    <div class="cell"></div>
    <div class="cell"></div>
</div>

CSS:

.table {
    display: table;
    width: 100%;
    border-spacing: 11px 0;
    border: 1px solid #222;
}

.cell {
    display: table-cell;
    width: 50%;
    height: 20px;
    border: 1px solid #999;
    background: #ccc;
}

JSFiddle: http://jsfiddle.net/ACH2Q/

Burweed

I decided to just make a third cell with 11px width. – Burweed

Answer 1

You can use the border-spacing property to add spacing to all table cells. Then use margin-left and margin right to remove the outer border-spacing from the parent.

.container {
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
}

.grid {
    margin-left: -20px; /* remove outer border spacing */
    margin-right: -20px; /* remove outer border spacing */
}

.row {
    display: table;
    table-layout: fixed; /* keep equal cell widths */
    width: 100%; /* need width otherwise cells aren't equal and they self collapse */
    border-spacing: 20px 0; /* best way to space cells but has outer padding */
}

.col {
    display: table-cell;
    vertical-align: top;
}

The only disadvantage is that you need the extra nested div because the table needs a width 100% and margin right won't work.

<div class="container">
    <div class="grid">
        <div class="row">
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
        </div>
    </div>
</div>

Predominant

Alternatively, you can do min-width:100%;margin:0 -20px; on .row, and it should work just fine :) – Sausa

@bfrohs, can you please provide a demo? margin-right doesn't seem to work with display: table under latest Chrome, even with min-width. – Esotropia

@SebastianNowak Doesn't seem to adjust the width in Firefox either. Maybe behavior changed since then or it never worked? Anyway, you can use calc(100% + 40px) (if supported) to work around the limitation: jsfiddle.net/bfrohs/0h5qyu0t – Sausa

Answer 2

If you look at the spec for tables in CSS, you will find there that the border-spacing applies uniformly, adding e.g. a margin to your table-cell elements is ignored.

So there seems to be no clean solution to your problem using divs with display: table except for quite dirty hacks (I found this one using "spacer divs").

But if it's OK for you to use a "real" table instead, then you can use a solution that I find quite acceptable. See this jsFiddle update of your original.

The markup (I added a column):

<table>
    <tr>
        <td></td>
        <td></td>
        <td class="last"></td>
    </tr>         
</table>

The idea is to make inner tds diplay:inline-block which makes them responsive to margins again. Then you apply a CSS selector rule td + td which selects all tds but the first one. Apply a margin-left to those elements to get your "inner spacing". Finally you have to float:right the last column to make it add up with the right table border.

table {
    width: 100%;
    border: 5px solid #222;
    border-collapse: separate;
}

td + td {
    margin-left: 8%;
}

td.last {
    float: right;
}

td {
    display: inline-block;
    width: 27%;
    height: 20px;
    border: 1px solid #999;
    background: #ccc;
}

Polacca

Answer 3

Just add negative margin-left and margin-right to match your horizontal (the first value) border-spacing value. Like so...

.table {
    display: table;
    width: 100%;
    border: 1px solid #222;
    border-spacing: 11px 0;
    /* values to add  */
    margin-left: -11px;
    margin-right: -11px;
}

Khrushchev

Answer 4

Use inner-table and negtive margin and then re-calc the width with css-calc () method (old width + 2 * border-width).

In my case the border is 2px;

.inner-table {
  display: inline-table;
  border-spacing: 2px 0;
  margin: 0 -2px;
  width: calc(100% + 4px);
}

Scleroprotein