Spazio tra due file in una tabella?

Questo è possibile tramite CSS?

sto provando

tr.classname {
  border-spacing: 5em;
}

inutilmente. Forse sto facendo qualcosa di sbagliato?

Devi usare l'imbottitura sui tuoi tdelementi. Qualcosa del genere dovrebbe fare il trucco. Ovviamente puoi ottenere lo stesso risultato usando un'imbottitura superiore anziché un'imbottitura inferiore.

Nel seguente codice CSS, il segno maggiore di indica che il riempimento è applicato solo agli tdelementi che sono direttori secondari agli trelementi con la classe spaceUnder. Ciò consentirà di utilizzare le tabelle nidificate. (Cella C e D nel codice di esempio.) Non sono troppo sicuro del supporto del browser per il selettore figlio diretto (pensate a IE 6), ma non dovrebbe violare il codice in nessun browser moderno.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Questo dovrebbe rendere un po 'come questo:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Nella tabella principale, prova a impostare

border-collapse:separate; 
border-spacing:5em;

Più una dichiarazione di frontiera e vedi se questo raggiunge l'effetto desiderato. Attenzione, tuttavia, che IE non supporta il modello "bordi separati".

Hai una tabella con album ID con qualsiasi dato ... Ho omesso i trs e i tds

<table id="albums" cellspacing="0">       
</table>

Nel CSS:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

dato che ho un'immagine di sfondo dietro il tavolo, falsificarla con imbottitura bianca non funzionerebbe. Ho scelto di inserire una riga vuota tra ogni riga di contenuto:

<tr class="spacer"><td></td></tr>

quindi usa CSS per dare alle righe del distanziatore una certa altezza e uno sfondo trasparente.

Dalla rete di sviluppatori Mozilla :

La proprietà CSS di spaziatura dei bordi specifica la distanza tra i bordi delle celle adiacenti (solo per il modello di bordi separati). Ciò equivale all'attributo cellpacing nell'HTML di presentazione, ma è possibile utilizzare un secondo valore opzionale per impostare una spaziatura orizzontale e verticale diversa.

Quest'ultima parte è spesso supervisionata. Esempio:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

AGGIORNARE

Ora capisco che l'OP vuole che le righe specifiche e separate abbiano una spaziatura maggiore. Ho aggiunto un setup con tbodyelementi che lo compiono senza rovinare la semantica. Tuttavia, non sono sicuro che sia supportato su tutti i browser. L'ho fatto in Chrome.

L'esempio che segue è per mostrare come puoi far sembrare che la tabella esista di file separate, dolcezza css in piena regola. Inoltre ha dato alla prima riga più spazio con l' tbodyinstallazione. Sentiti libero di usare!

Avviso di supporto: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Puoi provare ad aggiungere una riga di separazione:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Non è possibile modificare il margine di una cella di tabella. Ma PUOI cambiare l'imbottitura. Cambia il padding del TD, che renderà la cella più grande e spingerà il testo lontano dal lato con il padding aumentato. Se hai delle linee di confine, tuttavia, non sarà esattamente quello che vuoi.

Dai un'occhiata al border-collapse: attributo separato (impostazione predefinita) e proprietà border-spacing .

In primo luogo, è necessario separare loro con border-collasso , allora è possibile definire la spazio tra le colonne e righe con border-spacing .

Entrambe queste proprietà CSS sono in realtà ben supportate su tutti i browser, vedi qui .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, puoi farlo

tr.classname td {background-color:red; border-bottom: 5em solid white}

Assicurati che il colore di sfondo sia impostato su td piuttosto che sulla riga. Questo dovrebbe funzionare sulla maggior parte dei browser ... (Chrome, ie & ff testato)

Devi metterti border-collapse: separate;sul tavolo; la maggior parte dei fogli di stile predefiniti del browser inizia da border-collapse: collapse;, che annulla la spaziatura dei bordi.

Inoltre, spaziatura dei bordi: va avanti TD, non su TR.

Provare:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Puoi usare l' altezza della linea nella tabella:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Una risposta troppo tardi :)

Se si applica il float agli trelementi, è possibile spaziare tra due righe con marginattributo.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Per creare un'illusione di spaziatura tra le righe, applica il colore di sfondo alla riga e quindi crea un bordo spesso con il colore bianco in modo da creare uno "spazio" :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Il modo corretto di assegnare la spaziatura per le tabelle consiste nell'utilizzare il pad cellpding e il cellpacing ad es

<table cellpadding="4">

Mi sono imbattuto in questo mentre lottavo con un problema simile. Ho trovato la risposta di Varun Natraaj molto utile, ma avrei usato un bordo trasparente.

td { border: 1em solid transparent; }

I bordi trasparenti hanno ancora larghezza.

Funziona con la maggior parte dei browser più recenti nel 2015. Soluzione semplice. Non funziona in modo trasparente, ma a differenza della risposta di Thoronwen, non riesco ad ottenere il rendering trasparente con qualsiasi dimensione.

    tr {
      border-bottom:5em solid white;
    }

In poche parole divall'interno tde impostare le seguenti stili di div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Mi rendo conto che questa è una risposta a un vecchio thread e potrebbe non essere la soluzione richiesta, ma mentre tutte le soluzioni suggerite non hanno fatto ciò di cui avevo bisogno, questa soluzione ha funzionato per me.

Avevo 2 celle di tabella, una con il colore di sfondo, l'altra con un colore del bordo. Le soluzioni sopra rimuovono il bordo, quindi la cella a destra sembra fluttuare a mezz'aria. La soluzione che ha fatto il trucco è stata quella di sostituire table, tre tdcon div e classi corrispondenti: tabella sarebbe div id="table_replacer", tr sarebbe div class="tr_replacer"e td sarebbe div class="td_replacer"(cambiare ovviamente anche i tag di chiusura in div)

Per ottenere la soluzione al mio problema, il CSS è:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Spero che questo aiuti qualcuno.

Puoi riempire gli elementi <td /> con elementi <div /> e applicare qualsiasi margine ai div che ti piacciono. Per uno spazio visivo tra le righe, è possibile utilizzare un'immagine di sfondo ripetuta sull'elemento <tr />. (Questa era la soluzione che ho appena usato oggi e sembra funzionare sia su IE6 che su FireFox 3, anche se non l'ho più testato.)

Inoltre, se sei contrario a modificare il codice del tuo server per inserire <div /> s all'interno di <td /> s, puoi usare jQuery (o qualcosa di simile) per avvolgere dinamicamente i contenuti <td /> in un <div / >, che consente di applicare il CSS come desiderato.

Oppure aggiungi semplicemente uno spazio vuoto con l'altezza del margine tra le righe in cui desideri aggiungere la spaziatura

Ecco una soluzione semplice ed elegante, con alcuni avvertimenti:

• Non puoi effettivamente rendere trasparenti gli spazi vuoti, devi dare loro un colore specifico.
• Non è possibile arrotondare gli angoli dei bordi sopra e sotto gli spazi
• Devi conoscere l'imbottitura e i bordi delle celle della tabella

Con questo in mente, prova questo:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Quello che stai effettivamente facendo è incollare un ::beforeblocco rettangolare nella parte superiore di tutte le celle nella riga che vuoi che sia preceduta da uno spazio. Questi blocchi sporgono leggermente dalle celle per sovrapporsi ai bordi esistenti, nascondendoli. Questi blocchi sono solo un bordo superiore e inferiore inserito insieme: il bordo superiore costituisce lo spazio vuoto e il bordo inferiore ricrea l'aspetto del bordo superiore originale delle celle.

Nota che se hai un bordo attorno alla tabella stessa e alle celle, dovrai aumentare ulteriormente il margine orizzontale di dei tuoi "blocchi". Quindi, per un bordo di tabella 4px, dovresti invece usare:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

E se la tua tabella usa border-collapse:separateinvece di border-collapse:collapse, allora dovrai (a) usare l'intera larghezza del bordo della tabella:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... e anche (b) sostituire la doppia larghezza del bordo che ora deve apparire sotto il divario:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

La tecnica può essere facilmente adattata a una versione .gapafter, se preferisci, o alla creazione di spazi verticali (colonna) anziché spazi vuoti di riga.

Ecco un codice in cui puoi vederlo in azione: https://codepen.io/anon/pen/agqPpW

Qui funziona senza problemi:

#myOwnTable td { padding: 6px 0 6px 0;}

Suppongo che tu possa elaborare un layout più finemente dettagliato specificando quale dovrebbe essere.

facendo questo mostrato sopra ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

rimuove l'allineamento verticale delle colonne, quindi fai attenzione a come lo usi

Hai provato:

tr.classname { margin-bottom:5em; }

In alternativa, è possibile regolare anche ogni td:

td.classname { margin-bottom:5em; }

o

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