我正在尝试使用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/
我现在要做的是,每个table-row-group之间应该是一个空格,而不是表行之间。我试图在类表中添加边框间距,但这会导致所有行之间的间距,而不仅仅是表行组之间的间距。
有人知道解决方案吗?
答案 0 :(得分:2)
答案 1 :(得分:2)
答案 2 :(得分:2)
另一种解决方案是:
.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*/
}
另一个更好的方法是使用伪元素after
:
.row-group:after{
content: "";
height:20px;
display: block;
}
您可以根据需要调整身高。
答案 3 :(得分:0)
从表类中删除边框间距,然后使用与页面背景颜色相同的边框在组之间创建空格,此css应该可以正常工作;
.row .cell {
border-bottom: 10px solid #fff; /* FOR A WHITE BACKGROUND */
}
.row.header .cell {
border: none !Important;
}
在这里演示&gt; http://jsfiddle.net/23of5xv8/