如何在使用显示 table-row 时使用边框和填充

Question

我正在尝试通过 display:table css 属性创建一个 table。

table 需要在底部有一个边框，每行内有一个填充，例如：

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

我读过我可以通过使用这个

获得边框

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

我也知道我可以通过使用

获得填充

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

我现在处于无法同时使用两者的困境中。边框仅在我使用 border-collapse: collapse; 时有效，而填充仅在我使用 border-collapse:separate;

时有效

是否有任何解决方案或变通方法可以同时获得填充和边框？

编辑这是一个示例（边框不起作用）：

.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

编辑 2

这是我要实现的目标的图片：

Answer 1

编辑

像这样？

.table {
    display:table;
    border-collapse:separate;
    border-spacing:5px;
}
.row {
    display:table-row;
}
.cell{
    display:table-cell;
    border: 1px solid blue;
    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>

Answer 2

无法直接找到您正在寻找的答案。但是如果你想用一些黑客或其他方式来管理它，这里是解决方案。我只是做了一个演示，你可以根据你的要求定制。

.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>

如何在使用显示 table-row 时使用边框和填充

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

html

css

css-tables