CSSで罫線のある表の行間のスペース

各表の行に丸みのある境界線がある表を表示しようとしています。私はこれらの罫線の間にスペースを追加し、行自体ではないと考えています。もともと、私はそれらのスペースを外すために各行の間に追加の行<tr class='spacer'>を持っていましたが、その後、jQueryプラグインのTablesorterを使ってテーブルにソーター機能を追加しました。CSSで罫線のある表の行間のスペース

テーブルをソートしようとすると、これらのスペーサは、各行の間隔を取り除いて、下または上にソートされます。

私が探しているのは、これらの各行の間にスペースを入れて、テーブルを並べ替えることができる方法です。

// HTMLを次//

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="table.css"/> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("table").tablesorter(); 
}); 
</script> 

</head> 

<body> 

<table class="tablesorter" cellspacing=0> 
<thead> 
    <tr> 
    <th>Name</th> 
    <th>Date</th> 
    <th>Price</th> 
</tr> 
</thead> 

<tbody> 
<tr> 
    <td class='roundleft'>Keanan</td> 
    <td class='spacer'>01/11/11 6:52 AM</td> 
    <td class='roundright'>$20.95</td> 
</tr> 

<tr> 
    <td class='roundleft'>Conor</td> 
    <td class='spacer'>01/11/11 4:52 PM</td> 
    <td class='roundright'>$200.00</td> 
</tr> 

<tr> 
    <td class='roundleft'>Ryan</td> 
    <td class='spacer'>01/11/11 12:52 PM</td> 
    <td class='roundright'>$1.00</td> 
</tr> 

</tbody>  
</table> 

</body> 
</html>

// CSSは以下の//我々はセルのパディングとセル内間隔を達成することができます方法について説明しますStackOverflowの上で非常に良い質問があり

body { 
    text-align:center 
    margin:50px 0px; 
    padding:0px; 
    font-family: "Open Sans"; 
} 

#content { 
    font-weight:normal; 
    background: #009900; 
    width:700px; 
    margin:0px auto; 
    color:white; 
    border:2px solid #000000; 
    border-radius: 15px; 
} 

table{ 
    margin-left: auto; 
    margin-right:auto; 
    font-size: 12pt; 
    color: black; 
    border: 3px black solid; 
    border-radius: 15px; 
    padding-right: 10px; 
    padding-left: 10px; 
    background-color: #009900; 
} 

th{ 
    text-align: center; 
    color: white; 
    padding-right: 15px; 
    padding-left:10px; 
    padding-bottom: 5px; 
    font-size: 16pt; 
    font-weight: normal; 
    background-color: #009900; 
} 

tr{ 
    border-collapse: collapse; 
    height: 80px; 
    background-color: #FFFFFF; 
} 


td { 
    padding-left:0px; 
    padding-right: 0px; 
    padding-bottom: 5px; 
    text-align: center; 
    border-top: solid 1px black; 
    border-bottom: solid 2px black; 
    border-image: url(./borders/bottom.jpg); 
} 

td.spacer{ 
    padding-right: 20px; 
} 

td.roundleft{ 
    border-left: 1px solid; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    -moz-border-radius-topleft:15px; /* Firefox top left corner */ 
    -moz-border-radius-bottomleft:15px; /* Firefox bottom left corner */ 
} 

td.roundright{ 
    -moz-border-radius-topright:15px; /* Firefox top right corner */ 
    -moz-border-radius-bottomright:15px; /* Firefox bottom right corner */ 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    border-right: 2px solid; 
}

出典

2011-11-19 Keanan Koppenhaver