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

Question

我正在尝试使用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>

这也是一个 jsfiddle，您可以在其中尝试更改border-collapse属性

编辑 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>