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 · ベストアンサー

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

お礼

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

回答No.3

ORUKA1951

table関連のプロパティは、ブロックやインライン要素などの他のプロパティと違うので区別して覚えましょう。
　ここではスペースの関係でごく簡単にしか説明できません。
　詳しくは、
★17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html )
(注)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が効かないか分かりました。
大変参考になりました。回答ありがとうございます。

回答No.2

fujillin

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

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

お礼

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