TRタグの余白をcssで設定するには

TRタグとTRタグの間に余白とつけて表示したいのですが、
CSSでmarginが効かず、paddingはボーダーがTDタグの下に設定してあるので、
文字と線の間が開いてしまいます。

margin-bottomが効けばいいのですが、どうすれば表示することができますか？

<table>
<tr>
　　　<td>test</td>
　　　<td>test</td>
</tr>
<tr>
　　　<td>test</td>
　　　<td>test</td>
</tr>
</table>

No.1 ベストアンサー 回答者： noname#158634 回答日時： 2011/11/28 22:02

<tr>と<tr>の間には「何もない」。

どう頑張っても無理。近い動作としてはheightの指定。
というか、そんな場所に「余白」とやらを求める時点でコーディングがおかしいので考え直すべき。

この回答へのお礼

参考になりました。デザインやDIVの作りなおしも
検討してみます。

お礼日時：2011/11/30 06:32

No.3 回答者： ORUKA1951 回答日時： 2011/11/29 00:25

table関連のプロパティは、ブロックやインライン要素などの他のプロパティと違うので区別して覚えましょう。

　ここではスペースの関係でごく簡単にしか説明できません。
　詳しくは、
★17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
(注)CSS2.1であつても、table関連のプロパティは、すべてに対応しているブラウザは現時点でも皆無ですから注意すること。

下記はサンプルです。border-spacing:の値がひとつのときは上下左右、ふたつあるときは前の数字が左右、後ろの数字が上下になります。
　なお、タブは＿に置換してあります。

<table summary="縦の間隔">
＿<tbody>
＿＿<tr>
＿＿＿<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
＿＿</tr>
＿＿<tr>
＿＿＿<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
＿＿</tr>
＿＿<tr>
＿＿＿<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
＿＿</tr>
＿</tbody>
</table>
<table summary="横の間隔">
＿<tbody>
＿＿<tr>
＿＿＿<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
＿＿</tr>
＿＿<tr>
＿＿＿<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
＿＿</tr>
＿＿<tr>
＿＿＿<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
＿＿</tr>
＿</tbody>
</table>
において、
table{
＿border-collapse:separate;
＿border:solid 2px black;
＿margin: 10px auto;
}
table[summary="縦の間隔"]{
＿border-spacing:0 10px;
}
table[summary="横の間隔"]{
＿border-spacing:10px 0;
}
table th,table td{
＿border:solid 1px gray;
＿width: 6em;
}

この回答へのお礼

参照サイトを見て、なぜmarginが効かないか分かりました。
大変参考になりました。回答ありがとうございます。

お礼日時：2011/11/30 06:34

No.2 回答者： fujillin 回答日時： 2011/11/28 23:27

border-collapse: separate; border-spacing: 0px 20px;

みたいなことではダメかなぁ？

この回答へのお礼

試してみましたが無理でした。
回答ありがとうございます。

お礼日時：2011/11/30 06:33