html表中行之间的间距答案

【问题标题】：Spacing in a html table between rowshtml表中行之间的间距
【发布时间】：2014-09-11 09:45:28
【问题描述】：

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

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

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

这是小提琴：http://jsfiddle.net/2xqfdn38/

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

有人知道解决办法吗？

【问题讨论】：

你为什么不用真正的桌子？
请通过工作演示查看我的答案 :)

标签： html css css-tables tablerow

【解决方案1】：

另一种解决方案是：

.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*/
}

fiddle

一种更好的方法是使用伪元素after：

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

fiddle example using after

您可以根据需要调整高度。

【讨论】：

【解决方案2】：

我认为你应该在表格中使用边框折叠。

希望对你有帮助。

border-collapse:collapse;

DEMO

【讨论】：

DEMO中的代码还设置了.row-group { display: table}，这对效果至关重要。你应该在答案中这样说。制作行组表可能会对其他事情产生严重影响：你不再有一个表，所以你不能例如让浏览器根据内容要求分配列宽（否则可能会破坏表格布局）。

【解决方案3】：

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

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

我也更新了你的fiddle

【讨论】：

【解决方案4】：

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

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

在这里演示>http://jsfiddle.net/23of5xv8/

【讨论】：