Интервал в таблице html между строками

Question

Я пытаюсь построить таблицу с атрибутом display: table.

Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть структура, в которой моя таблица содержит разные строки, где каждая из двух строк должна создавать группу строк. Поэтому я использовал table-row-group

<div class="table"> 
<div style="display: table-row-group;"> 
<div class="display: table-row;"> 
    <div class="cell"> 
     <p>18:00:00</p> 
    </div> 
    <div class="cell"></div> 
    <div class="cell right"> 
     <p>A</p> 
    </div> 
</div> 
<div class="display: table-row;"> 
    <div class="cell team"> 
     <p>Team 1</p> 
    </div> 
    <div class="cell center"> 
     <p>:</p> 
    </div> 
    <div class="cell right team"> 
     <p>Team 2</p> 
    </div> 
</div> 
</div> 
</div> 

Вот скрипка: http://jsfiddle.net/2xqfdn38/

То, что я хочу сделать сейчас, между каждой таблицы-пропашные группы должен быть пробел, но не между рядами столов. Я попытался добавить пограничный интервал к таблице классов, но это приведет к интервалу между всеми строками и не только между группами table-row-groups.

Кто-нибудь знает решение?

Answer 1

Другим решением является:

.table { 
    font-size: 18px; 
    border-spacing: 0 10px; 
    display: table; 
    width: 100%; 
    border-collapse: collapse;/*Set border-collapse: collapse*/ 
} 

.row-group { 
    display: table-row-group; 
    width: 100%; 
    border-bottom: 10px solid #ffffff;/*Change border color to white and apply only to bottom*/ 
} 

fiddle

И один лучше один является использование псевдо-элемент after:

.row-group:after{ 
    content: ""; 
    height:20px; 
    display: block; 
} 

fiddle example using after

Вы можете отрегулировать высоту в соответствии с вашими потребностями.

Answer 2

Я думаю, вы должны использовать пограничный коллапс в таблице.

Надеюсь, это поможет вам.

border-collapse:collapse; 

DEMO

Answer 3

Удалить интервал границы из класса таблицы, а затем использовать бордюрный тот же цвет фона страницы, чтобы создать пространство между группами, это CSS должен работать нормально;

.row .cell { 
border-bottom: 10px solid #fff; /* FOR A WHITE BACKGROUND */ 
} 
.row.header .cell { 
border: none !Important; 
} 

Demo здесь>http://jsfiddle.net/23of5xv8/

Answer 4

следующие изменения в вашем CSS будет добавлять пространство между группами строк.

.row-group::after 
{ 
    content: "\00a0"; 
} 

Я также обновил ваш fiddle