Только граница между границами

Question

Мне нужно уметь выделять пространство между элементами таблицы, но оно также добавляет пространство по сторонам таблицы. Как удалить это пространство по бокам? Вот fiddle. <table> теги также могут быть использованы для этого, но проблема все еще стоит

<div class="wrapper"> 
    <div class="table"> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
    </div> 
    <div class="something-else"> 
     some other elements, table sides should align with this 
    </div> 
</div> 

.wrapper { 
    border: 1px solid green; 
    padding: 5px; 
} 
.table { 
    display: table; 
    border-spacing: 15px 0; 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    height: 50px; 
    border: 1px solid blue; 
} 
.something-else { 
    border: 1px solid red; 
    margin-top: 10px; 
} 

Answer 1

В зависимости от конкретных требований, можно достичь желаемого эффекта с border-width и :first-child:

.table { 
    display: table; 
    /* border-spacing: 15px 0; -- Removed this */ 
    table-layout: fixed; /* Added this (not required, but evened-out the column widths) */ 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    height: 50px; 
    border: 1px solid blue; 
    border-width: 1px 1px 1px 15px; /* Added this */ 
} 
/* Added this */ 
.cell:first-child { 
    border-width: 1px; /* Resets 15px border to 1px for first 'cell' */ 
} 

Fiddle: http://jsfiddle.net/aLa6G/6/

Answer 2

Это может быть то, что вы хотели. Поскольку вы обернули все в виде таблицы я использовал идею нескольких таблиц и создал таблицу вокруг строки 2, чтобы сделать его

http://jsfiddle.net/GGnrM/

HTML

<div class="wrapper"> 
    <div class="table"> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
    </div> 
    <div class="table2"> 
     <div class="something-else"> 
      some other elements, table sides should align with this 
     </div> 
    </div> 
</div> 

CSS

.wrapper { 
    border: 1px solid green; 
    padding: 10px 5px; 
} 
.table { 
    display: table; 
    border-spacing: 5px 0; 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    height: 50px; 
    border: 1px solid blue; 
} 
.table2 { 
    display: table; 
    margin-top:5px; 
    border-spacing: 5px 0; 
    width: 100%; 
} 

.something-else { 
    display: table-cell; 
    border: 1px solid red; 
    padding:1%; 
}