Spaces between table rows with borders in CSS

html css html-table tablesorter

22,860

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....

22,860

Author by

Keanan Koppenhaver

Updated on July 02, 2020

Comments

Keanan Koppenhaver about 4 years

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