2017-02-14 6 views
-2

私はいくつかの行の間にスペースを追加するつもりです。テーブル内にいくつかの行のスペースを設定できますが、ダミー行を挿入することはできませんか?

私の元のテーブル enter image description here

結果は次のようにする必要があります enter image description here

http://jsbin.com/xojurorani/1/edit?html,output

<table><tr></tr></table> 

感謝を。

更新: いくつかの特定の行の間にスペースを追加する必要がありますが、いくつかの種類のグループ化が必要ですが、境界線の間隔はすべての行にスペースを追加します。

パディングはセルのみに行うことができます。これにより、行の高さは高くなりますが、行間のスペースは生じません。

+0

が重複する可能性:とhttp://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table – Mart

+0

使用 'ボーダー-spacing' 'tr'。 'border-spacing:10px;' – Rahul

+1

[テーブル内の2つの行の間にスペースがありますか?](http://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table) – isherwood

答えて

2

これをチェックしてください。

table{ 
 
    border: 1px solid #121212; 
 
    border-collapse: separate; 
 
} 
 
tr{ 
 
    display: block; 
 
} 
 
tr:nth-child(2n+2){ 
 
    padding-bottom: 10px; 
 
} 
 
td{ 
 
    border-color: #121212; 
 
    border-style: solid; 
 
    border-width: 1px 1px 1px 0; 
 
    border-spacing: 0 5px; 
 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
<table cellspacing="0"> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100" scope="col">a&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    <td width="100" scope="col">&nbsp;</td> 
 
    </tr> 
 
    
 
</table> 
 
<p>&nbsp;</p> 
 
</body> 
 
</html>

今では正常に動作します。

だけtr{ display: block;}その後、tr:nth-child(2n+2){padding-bottom: 10px;}

+0

これで正常に動作します。スペアした後2行。 – Rahul

関連する問題