Clever Geek Handbook

Spacing in html table between lines

I am trying to create a table with an attribute display: table

.

The problem I am facing is that I have a structure where my table contains different rows, where each of the two rows should create a group of rows. So I usedtable-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 a fiddle: http://jsfiddle.net/2xqfdn38/

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

Does anyone know a solution?

+3


source to share


4 answers


Another solution:

.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*/
}

violin

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

:



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

example script using

You can adjust the height according to your needs.

+2


source


I think you should be using border-collapse on the table.

Hope this helps you.



border-collapse:collapse;

DEMO

+2


source


The following changes to your CSS will add space between line groups.

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

I have also updated your fiddle

+2


source


Remove the border between the table class, then use the border with the same color as the page background to create space between the groups, this css should work fine;

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

Demo here> http://jsfiddle.net/23of5xv8/

0


source






More articles:


All Articles