帶有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如下//

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