Question

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

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

我正在寻找的是一种在每个行之间留出空间的方法，并且仍允许表格进行排序。

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

Answer 1

enter image description here 根据我的知识，没有办法在两行之间添加保证金，但是你可以通过为你和

添加div来获得你想要的结果。

我已经为你找到了css和html

HTML代码：http://snipt.org/kyR3

CSS代码：http://snipt.org/kyP4

更改td的上下填充以在两行之间留出更多空间。

结果是......

Answer 2

关于STackoverflow的一个非常好的问题告诉我们如何使用CSS实现Cell Padding和Cell Spacing

请参阅Set cellpadding and cellspacing in CSS?

希望它能解决你的问题

具有CSS边框的表行之间的空格

2 个答案: