こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

[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>

よろしくお願いします

投稿日時 - 2014-08-29 14:05:07

QNo.8734837

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2014-08-29 14:31:02

お礼

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

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

投稿日時 - 2014-08-29 20:48:00

このQ&Aは役に立ちましたか?

9人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

<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>

投稿日時 - 2014-08-29 18:40:09

お礼

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

投稿日時 - 2014-08-29 20:47:28

あなたにオススメの質問