CSS: come si crea uno spazio tra le righe in una tabella?

Significa rendere la tabella risultante meno simile a questa:

[=== ROW ===]
[=== ROW ===]
[=== ROW ===]
[=== ROW ===]

... e altri come questo:

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

Ho provato ad aggiungere

margin-bottom:1em;

sia a td che a tr ma non ha ottenuto nulla. Qualche idea?

Tutto ciò di cui hai bisogno:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Ciò presuppone che tu voglia un gap verticale di 1em e nessun gap orizzontale. Se lo stai facendo, probabilmente dovresti anche controllare l'altezza della tua linea.

Un po 'strano che alcune delle risposte fornite dalle persone riguardino il collasso del confine: collasso, il cui effetto è l'esatto opposto di ciò che la domanda chiedeva.

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

Le celle non reagiranno a nulla a meno che non imposti prima il collasso del bordo. Puoi anche aggiungere bordi agli elementi TR una volta impostato (tra le altre cose).

Se questo è per il layout, passerei all'utilizzo di DIV e tecniche di layout più aggiornate, ma se si tratta di dati tabulari, buttati fuori. Faccio ancora un uso massiccio di tabelle nelle mie applicazioni web per i dati.

Se nessuna delle altre risposte è soddisfacente, puoi sempre creare una riga vuota e modellarla con CSS in modo appropriato per essere trasparente.

Se non hai bordi o hai bordi e vuoi la spaziatura all'interno delle celle, puoi usare padding, o line-height. Per quanto ne so, il margine non ha alcun effetto su celle e righe.
Una proprietà CSS per la spaziatura delle celle è border-spacing, ma non funziona su IE6 / 7 (quindi puoi usarla a seconda della tua folla).

Se tutto il resto fallisce, puoi usare il vecchio cellspacingattributo nel tuo markup, ma questo ti darà anche la spaziatura tra le colonne. Alcuni reset CSS suggeriscono di impostarlo comunque per ottenere il supporto cross-browser:

/ * le tabelle devono ancora essere cellspacing="0"inserite nel markup * /

Questo è il modo (stavo pensando che è impossibile):

Per prima cosa assegna alla tabella solo la spaziatura del bordo verticale (ad esempio 5px) e imposta la spaziatura del bordo orizzontale su 0. Quindi dovresti dare i bordi appropriati a ciascuna cella della riga. Ad esempio, la cella più a destra di ogni riga dovrebbe avere un bordo in alto, in basso e a destra. Le celle più a sinistra dovrebbero avere un bordo in alto, in basso e a sinistra. E le altre celle tra queste 2 dovrebbero avere solo un bordo in alto e in basso. Come questo esempio:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

A mio parere, il modo più semplice per farlo è aggiungere il riempimento al tuo tag.

td {
 padding: 10px 0
}

Spero che questo ti possa aiutare! Cheer!

Semplicemente puoi usare padding-tope padding-bottomsu un tdelemento.

L'unità può qualsiasi cosa da questo elenco:

Codice demo:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

il riempimento nel TD funziona se si desidera che lo spazio abbia lo stesso colore di sfondo del td

nel mio caso, il requisito era lo spazio bianco tra la riga di intestazione e qualunque cosa fosse al di sopra

applicando questo stile a una singola cella, sono stato in grado di ottenere la separazione desiderata. Non era necessario aggiungerlo a tutte le celle ... Probabilmente non il PIÙ elegante, ma forse più elegante delle righe di separazione.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Se ti attieni al design utilizzando le tabelle, l'idea migliore sarà quella di fornire una riga vuota senza contenuto e con un'altezza specificata tra ogni riga della tabella.

Puoi usare div per evitare questa complessità. Dai un margine a ogni div.

Puoi anche modificare l'altezza di ogni riga usando CSS.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Puoi anche modificare l'altezza <td>dell'elemento, dovrebbe darti lo stesso risultato.

Creane un altro <tr>appena sotto e aggiungi un po 'di spazio o altezza al contenuto di<td>

Guarda il violino per esempio

https://jsfiddle.net/jd_dev777/wx63norf/9/

Aggiungi la seguente regola a tr e dovrebbe funzionare

float: left

Esempio (aprilo in IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: questa non è una soluzione legale o corretta come sottolineato da molti, ma se non hai alcuna opzione e hai bisogno di qualcosa, questo funzionerà in IE9.

Quindi tutti coloro che stanno dando voti, per favore fateci sapere anche la soluzione corretta