Html CSS中带有边框的表格行之间的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8191909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spaces between table rows with borders in CSS
提问by Keanan Koppenhaver
I'm trying to display a table where each table row has a rounded border. I'm looking to add spaces between these borders and not within the row itself. Originally, I had an additional row <tr class='spacer'>in between each row to space them out, but have since added sorter functionality to my table using a jQuery plugin, Tablesorter.
我正在尝试显示一个表格，其中每个表格行都有一个圆形边框。我希望在这些边框之间而不是在行本身内添加空格。最初，我<tr class='spacer'>在每行之间增加了一行以将它们隔开，但此后使用 jQuery 插件 Tablesorter 向我的表添加了排序器功能。
When I try to sort my table, these spacers sort to the bottom or top, removing the spacing between each row.
当我尝试对表格进行排序时，这些间隔器会从底部或顶部排序，从而消除每行之间的间距。
What I'm looking for is a way to space between each of these rows and still allow the table to be sortable.
我正在寻找的是一种在这些行中的每一行之间留出空间并仍然允许表格进行排序的方法。
//HTML Follows//
//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'>.95</td>
</tr>
<tr>
<td class='roundleft'>Conor</td>
<td class='spacer'>01/11/11 4:52 PM</td>
<td class='roundright'>0.00</td>
</tr>
<tr>
<td class='roundleft'>Ryan</td>
<td class='spacer'>01/11/11 12:52 PM</td>
<td class='roundright'>.00</td>
</tr>
</tbody>
</table>
</body>
</html>
//CSS follows//
//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;
}
采纳答案by Code Lover
As per my knowledge there is not way to add margin between two row, however you can get your desire result by adding div for your and
据我所知，无法在两行之间添加边距，但是您可以通过为您的和
I have done css and html for you find here
我已经完成了 css 和 html，你可以在这里找到
HTML Code: http://snipt.org/kyR3
HTML 代码：http: //snipt.org/kyR3
CSS Code: http://snipt.org/kyP4
CSS 代码：http: //snipt.org/kyP4
Change top-bottom padding for td to give more space between two row.
更改 td 的上下填充以在两行之间留出更多空间。
Here is the result....
这是结果......
回答by Moons
There is a very good question on STackoverflow that tells how can we achieve the Cell Padding and Cell Spacing using CSS
STackoverflow 上有一个很好的问题，它告诉我们如何使用 CSS 实现单元格填充和单元格间距
Please See Set cellpadding and cellspacing in CSS?
Hope it solves your problem
希望它能解决你的问题
