行间样式表html,html – CSS中带边框的表行之间的空格

我正在尝试显示一个表,其中每个表行都有一个圆角边框.我想在这些边框之间添加空格,而不是在行本身之间.最初,我有一个额外的行< tr class ='spacer'>在每一行之间将它们分开,但后来使用jQuery插件Tablesorter为我的表添加了分类器功能.

当我尝试对表格进行排序时,这些间隔符会排到底部或顶部,从而消除每行之间的间距.

我正在寻找的是一种在每个行之间留出空间的方法,并且仍然允许表可以排序.

// HTML关注//

$(document).ready(function() {

$("table").tablesorter();

});

NameDatePrice

Keanan01/11/11 6:52 AM$20.95Conor01/11/11 4:52 PM$200.00Ryan01/11/11 12:52 PM$1.00

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

}