Gli spazi tra le righe della tabella con bordi in CSS

Sto cercando di visualizzare una tabella in cui ogni riga della tabella ha un bordo arrotondato. Sto cercando di aggiungere spazi tra questi confini e non all'interno della stessa riga. In origine, ho avuto una riga aggiuntiva <tr class='spacer'> tra ogni fila per lo spazio loro fuori, ma da allora hanno funzionalità sorter aggiunto al mio tavolo utilizzando un plugin per jQuery, tablesorter.Gli spazi tra le righe della tabella con bordi in CSS

Quando si tenta di ordinare mio tavolo, questi distanziali ordinare alla parte inferiore o superiore, rimuovendo la distanza tra ciascuna riga.

Quello che sto cercando è un modo per spazio tra ciascuna di queste righe e consentono ancora la tavola per essere ordinabili.

// // HTML Segue

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

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

fonte

2011-11-19 Keanan Koppenhaver

enter image description here Come per la mia conoscenza non c'è modo per aggiungere margine tra due file, tuttavia è possibile ottenere il risultato desiderio aggiungendo div per la vostra e

ho fatto CSS e HTML per che trovate qui

Codice

HTML: http://snipt.org/kyR3

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

Change padding superiore-inferiore per td per dare più spazio tra le due fila.

Ecco il risultato ....

fonte

2011-11-19 07:21:17

Il CSS funziona perfettamente, ma hai solo bisogno di un div all'interno del td. 'codice'

Keanan

' codice' –

I collegamenti non rispondono. – Glenn

@Code Lover: si prega di inserire il codice direttamente nella risposta, i collegamenti sono morti. – Roman

C'è una domanda molto buona su StackOverflow che dice come possiamo raggiungere l'imbottitura cellula e cellula spaziatura usando i CSS

si prega di consultare Set cellpadding and cellspacing in CSS?

spero che risolve il problema

fonte

2011-11-19 04:34:49 Moons

Il metodo che essi descrivono ci lavora, tranne per il fatto che ora c'è anche spazio tra i 's , che visualizza il fondo verde tra ogni cella di una tabella bianca. Sto cercando di aggiungere spazio tra le file, mentre non mettere spazi tra le cellule. –

Gli spazi tra le righe della tabella con bordi in CSS

risposta

Problemi correlati