html表格中行与行之间的间距

我正在尝试使用

display:table

属性构建一个表

我遇到的问题是，我有一个结构，其中我的表包含不同的行，其中每两行应该构建一组行。 因此我使用了

表行组

<div class="table">
<div style="display: table-row-group;">
<div class="display: table-row;">
    <div class="cell">
        <p>18:00:00</p>
    </div>
    <div class="cell"></div>
    <div class="cell right">
        <p>A</p>
    </div>
</div>
<div class="display: table-row;">
    <div class="cell team">
        <p>Team 1</p>
    </div>
    <div class="cell center">
        <p>:</p>
    </div>
    <div class="cell right team">
        <p>Team 2</p>
    </div>
</div>
</div>
</div>

18:00:00

A

第一队

:

第二小组

这是小提琴：

我现在要做的是，在每个表行组之间应该有一个空格，而不是在表行之间。我试图向类表中添加边框间距，但这将导致所有行之间的间距，而不仅仅是表行组之间的间距

---

有人知道解决方案吗？

我认为您应该在表中使用边框折叠

我希望它能帮助你

border-collapse:collapse;

---

从表类中删除边框间距，然后使用与页面背景颜色相同的边框在组之间创建一个空格，此css应该可以正常工作

.row .cell {
border-bottom: 10px solid #fff; /* FOR A WHITE BACKGROUND */
}
.row.header .cell {
border: none !Important;
}

---

此处演示>

css中的以下更改将在行组之间添加空间

.row-group::after
{
    content: "\00a0";
}

我还更新了您的

另一个解决方案是：

.table {
    font-size: 18px;
    border-spacing: 0 10px;
    display: table;
    width: 100%;
    border-collapse: collapse;/*Set border-collapse: collapse*/
}

.row-group {
    display: table-row-group;
    width: 100%;
    border-bottom: 10px solid #ffffff;/*Change border color to white and apply only to bottom*/
}

更好的方法是在之后使用伪元素

：

.row-group:after{
    content: "";
    height:20px;
    display: block;
}


您可以根据需要调整高度。
为什么不使用真正的桌子？请查看我的答案和一个工作演示：）演示中的代码还设置了
。行组{display:table}
，这对效果至关重要。你应该在回答中这样说。制作行组表可能会对其他事情产生严重影响：您不再有一个表，因此您不能让浏览器根据内容要求分配列宽（或者他们可能破坏表格布局）。