CSS Display table add space between separating border - css

Question

In a markup with display: table I'd like to separate some rows with a dividing line.
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {display: table-row; }
.table-cell {display: table-cell; width: 50%}
.border-between {border-top:1px solid;}
.padding-t {padding-top: .5rem}
.padding-b {padding-bottom: .5rem}
<div class="table">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">1</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell padding-b">2</div>
</div>
<div class="table-row border-between">
<div class="table-cell padding-t">3</div>
<div class="table-cell">3</div>
</div>
<div class="table-row">
<div class="table-cell">4</div>
<div class="table-cell">4</div>
</div>
<div class="table-row border-between">
<div class="table-cell">5</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">6</div>
</div>
<div class="table-row">
<div class="table-cell">7</div>
<div class="table-cell">7</div>
</div>
<div class="table-row">
<div class="table-cell">8</div>
<div class="table-cell">8</div>
</div>
</div>
While this works without problem when setting border-collapse: collapse; I'm looking for a nice and clean way to add some vertical space before and after the line as I did in my example between line 2 and 3. I would favor a solution without adding extra markup and modifying some cells for providing padding. Thanks for pushing me into the right direction!

Answer 1

You can simply define the height of every cell thereafter align the contents(numbers) in the center will also make it looks like an expected result you want
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
width: 50%;
}
.border-between {
border-top: 1px solid;
}
.m {
height: 50px;
line-height: 50px;
}
<div class="table">
<div class="table-row">
<div class="table-cell m">1</div>
<div class="table-cell m">1</div>
</div>
<div class="table-row">
<div class="table-cell m">2</div>
<div class="table-cell m">2</div>
</div>
<div class="table-row border-between">
<div class="table-cell m">3</div>
<div class="table-cell m">3</div>
</div>
<div class="table-row">
<div class="table-cell m">4</div>
<div class="table-cell m">4</div>
</div>
<div class="table-row border-between">
<div class="table-cell m">5</div>
<div class="table-cell m">5</div>
</div>
<div class="table-row">
<div class="table-cell m">6</div>
<div class="table-cell m">6</div>
</div>
<div class="table-row">
<div class="table-cell m">7</div>
<div class="table-cell m">7</div>
</div>
<div class="table-row">
<div class="table-cell m">8</div>
<div class="table-cell m">8</div>
</div>
</div>