How to use a border and a padding while using display table-row

Question

I am trying to use create a table by using the display:table css attributes.

The table needs to have a border at the bottom and a padding inside every row, like:

.row{
    display: table-row;
    border-bottom: 1px solid #e5e5e5;
    padding: 20px 0;
}

I have read that i can get the border by using this

.table {
    border-collapse: collapse;
}
.row {
    border-bottom: solid #000 3px
}

I also know that i can get the padding by using

.table {
    display:table;
    border-collapse:separate;
    border-spacing:5px;
}
.row {
    display:table-row;
}

I am now in the the dilemma that i can't use both at the same time. The border only works when I am using border-collapse: collapse; while the padding only works when i am using border-collapse:separate;

Is there any solution or workaround to get both, the padding and the border at the same time?

Edit Heres an example (border doesnt work):

.table {
    display:table;
    border-collapse:seperate;
    border-spacing:15px;
}
.row {
    display:table-row;
    border-bottom:3px solid #000;
}
.cell{
    display:table-cell;
    background-color: #eee;
    padding:20px;
}

<div class="table">
  <div class="row">
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
  </div>
  <div class="row">
    <div class="cell">
      some content<br> in another row
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
  </div>
  <div class="row">
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
  </div>
</div>

Here's also a jsfiddle in which you can try to change the border-collapseattribute

Edit 2

Heres an picture of what I'm trying to achive:

Answer 1

The answer you are looking for isn't possible directly. But if you wish to manage it with some hacks or other ways, here is the solution. I just did a demo, you can customize to your requirement.

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  background-color: #eee;
  padding: 20px;
  position: relative;
}

.cell:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 3px;
  margin-top: 6px;
  background: #000;
}

.cell:before {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  top: 100%;
  width: 15px;
  height: 3px;
  margin-top: 6px;
  background: #000;
}


/*  Delete below code if you want border below last row as well*/

.row:last-child .cell:before,
.row:last-child .cell:after {
  content: none;
}

<div class="table">
  <div class="row">
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
  </div>
  <div class="row">
    <div class="cell">
      some content<br> in another row
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
  </div>
  <div class="row">
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell">
      some content
    </div>
  </div>
</div>