tr 사이에 공백이있는 tr 사이의 공백

Question

각 행이 인접한 상자이고 행 사이에 공백이있는 행으로 표시되도록 표의 서식을 지정하려고합니다. 예 : 내가 좋아하는 뭔가를 보일 것입니다 원하는 것은

<table> 
<tr><td>John</td><td>Doe</td><td>24</td></tr> 
<tr><td>Jack</td><td>Foo</td><td>34</td></tr> 
<tr><td>Jim</td><td>Beam</td><td>102</td></tr> 
</table> 

다음

<style> 
body { background-color: #aaaaff; } 
table { border-collapse: collapse; } 
.space_tr { height: 1px; } 
.info_tr { background-color: grey; } 
.info_tr td { padding: 5 20 5 20px; } 
</style> 
<table> 
<tr class='info_tr'><td>John</td><td>Doe</td><td>24</td></tr> 
<tr class='space_tr'><td colspan='3'></td></tr> 
<tr class='info_tr'><td>Jack</td><td>Foo</td><td>34</td></tr> 
<tr class='space_tr'><td colspan='3'></td></tr> 
<tr class='info_tr'><td>Jim</td><td>Beam</td><td>216</td></tr> 
</table> 

:

내가 데이터 사이에 추가 TR-행함으로써 위 달성 그러나 나는 CSS로이 포맷팅을 할 수 있는지, 즉 맨 위에 쓴 html의 내용을 바꾸지 않고 알고 싶습니다.

편집 :

아담 키스는 배경과 같은 색으로 바닥 국경을 사용하여 제안했다. 이것은 현재의 경우 작동하지만, 그가 지적한 것처럼, 이것은 같은 색 표면이 아닌 배경을 가질 때 작동하지 않습니다.

완전성을 위해 : 간격 갭의 투명성을 유지하면서 위와 같이 달성 할 수 있습니까?

Answer 1

사진이 절대적으로 충분해야 다음, 당신은 풀 컬러 배경이 의미에서 알 수 있듯이 상황 인 경우 :

:

td { padding: 5px 20px; background: #666; border-bottom: 3px solid #backgroundColor; } 

은 그냥 업데이 트를 발견 : 나는 어떤 <을 사용하거나 span> (또는 다른 태그) 안에 < td> 또는 마진을 가진 < td> s, 비록 내가 그게 효과가 있다고 생각하지 않지만 :)

Answer 2

border-bottom: 2px solid #aaaaff;을 추가 할 수 있습니다. tr s입니다. 여기서 #aaaaff은 신체의 배경색이고 2px은 행 사이의 공백입니다.

예 : http://jsfiddle.net/ZHdgz/

Answer 3

<style> 
    table { border-collapse: collapse; border:solid 10px #aaaaff; background-color:#aaaaff;} 
    .space_tr { height: 1px; } 
    .info_tr { background-color: grey; } 
    .info_tr td { padding: 5 20 5 20px; } 
    </style> 
    <table> 
    <tr class='info_tr'><td>John</td><td>Doe</td><td>24</td></tr> 
    <tr class='space_tr'><td colspan='3'></td></tr> 
    <tr class='info_tr'><td>Jack</td><td>Foo</td><td>34</td></tr> 
    <tr class='space_tr'><td colspan='3'></td></tr> 
    <tr class='info_tr'><td>Jim</td><td>Beam</td><td>216</td></tr> 
    </table> 

이 시도는 .....이 작업을