使用显示表格行时如何使用边框和填充答案

【问题标题】：How to use a border and a padding while using display table-row使用显示表格行时如何使用边框和填充
【发布时间】：2021-04-14 14:31:43
【问题描述】：

我正在尝试使用display:table css 属性创建一个表。

表格需要在底部有一个边框，并且在每一行内都有一个填充，例如：

.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

这是我想要达到的目标的图片：

【问题讨论】：

标签： html css css-tables

【解决方案1】：

您正在寻找的答案无法直接获得。但是，如果您希望通过一些技巧或其他方式来管理它，这里是解决方案。我刚刚做了一个演示，您可以根据自己的要求进行自定义。

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

【讨论】：

【解决方案2】：

编辑

像这样？

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

【讨论】：