행 사이의 html 테이블의 간격

Question

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> 

table-row-group를 사용하는 바이올린의 : 나는 테이블 행 사이의 공간이 아니라해야 각 테이블 행 그룹 사이에, 지금 수행 할 작업을 http://jsfiddle.net/2xqfdn38/

. 나는 class-table에 border-spacing을 추가하려고 시도했으나, 이것은 table-row-groups 사이뿐만 아니라 모든 행 사이의 간격을 초래할 것이다.

아무도 해결책을 알고 있습니까?

Answer 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; 
} 

을3210

fiddle example using after

필요에 따라 높이를 조정할 수 있습니다.

Answer 2

나는 당신이 테이블에 border-collapse를 사용해야한다고 생각한다.

나는 그것이 당신을 도울 것이라고 희망합니다.

border-collapse:collapse; 

DEMO

Answer 3

이 CSS가 잘 작동합니다 그룹 사이의 공간을 만들기 위해 귀하의 페이지 배경으로 테두리에 동일한 색상을 사용 후, 테이블 클래스에서 국경 간격을 제거;

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

데모 여기> 당신의 CSS에서 http://jsfiddle.net/23of5xv8/

Answer 4

변경 내용은 다음과 행 그룹 사이에 공간을 추가합니다.

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

또한 업데이트 한 사용자의 fiddle