Spaces between table rows with borders in CSS

Question

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.

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

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

score 1 · Accepted Answer · answered Nov 19 '11 at 07:21

1

enter image description here 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

HTML Code: http://snipt.org/kyR3

CSS Code: http://snipt.org/kyP4

Change top-bottom padding for td to give more space between two row.

Here is the result....

answered Nov 19 '11 at 07:21

Code Lover

8,099
20
84
154

The CSS works perfectly, but you just need a div within the td. `code`
Keanan
`code` – Keanan Koppenhaver Nov 28 '11 at 19:35
Your links are not responding. – Glenn May 04 '15 at 22:41
3

@Code Lover: Please would you place your code directly into your answer, your links are dead. – Roman Jul 09 '15 at 09:06

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

There is a very good question on STackoverflow that tells how can we achieve the Cell Padding and Cell Spacing using CSS

Please See Set cellpadding and cellspacing in CSS?

Hope it solves your problem

edited May 23 '17 at 12:06

Community

1
1

answered Nov 19 '11 at 04:34

Moons

3,833
4
49
82

The method that they describe there works, except for the fact that there is now also space between the 's, which displays the green background between every white table cell. I'm looking to add space between the rows, while not putting spaces between the cells. – Keanan Koppenhaver Nov 19 '11 at 04:53

Spaces between table rows with borders in CSS

2 Answers2