[英]Spacing in a html table between rows
I'm trying to build a table with the display: table
attribute. 我正在尝试使用display: table
属性构建一个表。
The problem I'm having is that I've got a structure where my Table contains different rows where each two rows should build a group of rows. 我遇到的问题是我有一个结构,其中我的表包含不同的行,其中每两行应该构建一组行。 Therefore I used table-row-group
因此我使用了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>
Here's the fiddle: http://jsfiddle.net/2xqfdn38/ 这是小提琴: http : //jsfiddle.net/2xqfdn38/
What I want to do now, between each table-row-group should be a space but not between the table-rows. 我现在要做的是,每个table-row-group之间应该是一个空格,而不是表行之间。 I tried to add a border-spacing to the class table, but this will result in a spacing between all rows and not only between the table-row-groups. 我尝试在类表中添加边框间距,但这会导致所有行之间的间距,而不仅仅是表行组之间的间距。
Does anybody knows a solution? 有人知道解决方案吗?
Another solution is: 另一种解决方案是
.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*/
}
And one better one is to use pseudo-element after
: 和一个更好的方法是使用伪元素after
:
.row-group:after{
content: "";
height:20px;
display: block;
}
fiddle example using after 使用后的小提琴示例
You can adjust height according your needs. 您可以根据需要调整高度。
Remove the border spacing from table class, Then use a border the same colour as your page background to create a space between the groups, this css should work fine; 从表类中删除边框间距,然后使用与页面背景颜色相同的边框在组之间创建一个空格,这个css应该可以正常工作;
.row .cell {
border-bottom: 10px solid #fff; /* FOR A WHITE BACKGROUND */
}
.row.header .cell {
border: none !Important;
}
Demo here > http://jsfiddle.net/23of5xv8/ 在这里演示> http://jsfiddle.net/23of5xv8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.