Spacing in a html table between rows

Question

I'm trying to build a table with the display: table attribute.

The problem I'm having is that I've got a structure where my Table contains different rows where each two rows should build a group of rows. Therefore I used 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>

Here's the fiddle: http://jsfiddle.net/2xqfdn38/

What I want to do now, between each table-row-group should be a space but not between the table-rows. I tried to add a border-spacing to the class table, but this will result in a spacing between all rows and not only between the table-row-groups.

Does anybody knows a solution?

Answer 1

Another solution is:

.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

And one better one is to use pseudo-element after:

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

fiddle example using after

You can adjust height according your needs.

Answer 2

The following changes in your css will add space between row groups.

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

I have also updated your fiddle