Espacios entre las filas de la tabla con bordes en CSS

Estoy tratando de mostrar una tabla donde cada fila de la tabla tiene un borde redondeado. Estoy buscando agregar espacios entre estas fronteras y no dentro de la misma fila. Originalmente, tenía una fila adicional <tr class='spacer'> entre cada fila para espaciarlas, pero desde entonces he agregado la funcionalidad del clasificador a mi tabla usando un plugin jQuery, Tablesorter.Espacios entre las filas de la tabla con bordes en CSS

Cuando trato de ordenar mi tabla, estos espaciadores se ordenan hacia abajo o hacia arriba, eliminando el espaciado entre cada fila.

Lo que estoy buscando es una forma de espacio entre cada una de estas filas y todavía permitir que la tabla sea ordenable.

// // HTML Sigue

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

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

Fuente

2011-11-19 Keanan Koppenhaver

enter image description here Según mi conocimiento no hay manera de agregar margen entre dos hileras, sin embargo, se puede obtener el resultado de su deseo añadiendo div para su y

he hecho CSS y HTML para que encuentre aquí

Código

HTML: http://snipt.org/kyR3

Código CSS: http://snipt.org/kyP4

Cambio relleno superior-inferior para TD para dar más espacio entre dos filas.

Este es el resultado ....

Fuente

2011-11-19 07:21:17

El CSS funciona perfectamente, pero solo necesita un div dentro del td. 'código'

Keanan

' código' –

Tus enlaces no están respondiendo. – Glenn

@Code Lover: Por favor, coloca tu código directamente en tu respuesta, tus enlaces están muertos. – Roman

Hay una muy buena pregunta en StackOverflow que nos dice cómo podemos lograr el relleno y espaciado de celda el uso de CSS

Por favor, vea Set cellpadding and cellspacing in CSS?

espero que resuelve su problema

Fuente

2011-11-19 04:34:49 Moons

El método que se describen no funciona, excepto por el hecho de que ahora hay también espacio entre las 's, que muestra el fondo verde entre cada celda de la tabla blanco. Estoy buscando agregar espacio entre las filas, sin poner espacios entre las celdas. –

Espacios entre las filas de la tabla con bordes en CSS

Respuesta

Cuestiones relacionadas