Spaces between table rows with borders in CSS

Question 1

Spaces between table rows with borders in CSS

html css html-table tablesorter

Keanan Koppenhaver · Nov 19, 2011 · Viewed 21.9k times · Source

Answer

Answer

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

Question 2

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

Spaces between table rows with borders in CSS

Answer

Related questions