[CSS] tableの行の間隔をあける

質問

table {
　border-collapse: separate;
　border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか？

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

回答No.1

ORUKA1951 · ベストアンサー

<table summary="見本の表" border="1">
　<tbody>
　　<tr>
　　　<th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　</tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

お礼

ご回答ありがとうございます

border-spacing: 0 5px;
と指定すればよかったのですね

回答No.2

Ogre7077

<style>
table[border] { border-collapse: separate; border-spacing: 0 1ex; border: 0; }
table[border] td,
table[border] th { border: solid black; border-width: 1px 1px 1px 0; }
table[border] td:first-child,
table[border] th:first-child { border-width: 1px; }
</style>
<table border>
<caption>行だけ間隔を空けた表</caption>
<tr><th> name <th> age <th> memo
<tr><td> alpha <td> 12 <td> AAAAAAAAA
<tr><td> beta <td> 345 <td> BBB
<tr><td> gamma <td> 6789 <td> C
</section>

お礼

シンプルなコードありがとうございます