Come inserire la spaziatura tra gli elementi TBODY

Ho un tavolo come questo:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Vorrei inserire un po 'di spaziatura tra ogni elemento tbody, ma padding e margin non hanno effetto. Qualche idea?

Prova questo, se non ti dispiace non avere confini.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Qualcosa di simile funzionerà, a seconda dei requisiti di supporto del browser:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Le persone avranno sempre opinioni controverse sull'utilizzo di elementi di tabella vuoti per il layout di una pagina (come evidenziato dal voto negativo di questa risposta). Lo riconosco, ma a volte è più facile usarli in questo modo quando si lavora in modo " veloce e sporco ".

Ho usato righe vuote in progetti precedenti per spaziare gruppi di righe di tabella. Ho assegnato alle righe spaziatore una classe CSS propria e ho definito un'altezza per quella classe che fungeva da margine superiore e inferiore per quel gruppo di righe della tabella.

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

Se non hai bordi sulle celle della tabella, puoi anche definire un'altezza per la tua cella o riga tipica nel tuo foglio di stile che spazia uniformemente su tutte le righe della tabella.

tr{
   height: 40px;
}

Avevo avuto problemi a spaziare correttamente i multipli <tbody>con ::beforepseudo, in presenza di <tr>contenere <td>con rowspan in un paio di browser.

Fondamentalmente, se hai una <tbody>struttura come questa:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

E segui chi consiglia di scrivere css su ::beforepseudo elemento come questo:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Questo influenzerà il rowspan, facendo in modo che la tabella "perda" entro la seconda <tr>quanti <td>-rowspan sono presenti nella prima.

Quindi, se qualcuno incontra quel tipo di problema, la soluzione è di stile ::beforepseudo in questo modo:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Ecco un violino

Ecco un'altra possibilità che si basa su: first-child che non è disponibile in tutti i browser:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Basta impostare displaycome blocke funzionerà.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Di tutte le risposte fornite sopra, solo quelle di djenson47 mantengono la separazione tra presentazione e contenuto . Lo svantaggio del metodo del modello del bordo compresso è che non è più possibile utilizzare gli attributi del bordo o dello spazio tra le celle della tabella per separare le singole celle. Potresti sostenere che questa è una buona cosa e che ci sono alcune soluzioni alternative, ma può essere un problema. Quindi penso che il metodo del primo figlio sia il più elegante.

In alternativa, puoi anche impostare la proprietà di overflow della tua classe TBODY su qualcosa di diverso da "visibile". Questo metodo consente di mantenere anche un modello di bordi separati:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Poiché il padding può essere applicato ai TD, puoi fare un trucco con il segno +. Quindi sarà possibile dare un top padding ai TD del primo TR di un corpo:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Ho aggiunto "tbody + tbody" così il primo tbody non avrà un'imbottitura superiore. Tuttavia, non è richiesto.

Per quanto ne so non ci sono inconvenienti :), sebbene non abbia testato i browser più vecchi.

È possibile utilizzare border-spacingin una tabella con gruppi di righe di tabella per aggiungere uno spazio tra questi gruppi. Tuttavia, non credo che ci sia un modo per specificare quali gruppi sono distanziati e quali no.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

NUOVA RISPOSTA

Puoi utilizzare tutti i <tbody>tag che desideri. Fino ad ora non avevo realizzato che andasse bene per W3C. Per non dire che la mia soluzione di seguito non funziona (funziona), ma per fare quello che stai cercando di fare, assegna le <tbody>classi dei tag e quindi fai riferimento ai loro <td>tag individuali tramite CSS in questo modo:

table tbody.yourClass td {
    padding: 10px;
}

e il tuo HTML così:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Prova quel ragazzo :)

VECCHIA RISPOSTA

qualunque cosa tu faccia, NON inserire righe vuote ...

non dovresti avere più di 1 elemento tbody nella tua tabella. quello che puoi fare è impostare l'attributo class o id nei tuoi <tr>elementi e dare il <td>riempimento dei tag corrispondenti :

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Puoi anche assegnare la parte superiore e inferiore <tr>di una classe aggiuntiva in modo che eseguano solo il riempimento superiore o inferiore, rispettivamente:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

e nel tuo codice HTML, il <tr>tag sarebbe simile a questo:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Spero che questo ti aiuti!

La risposta di djensen47 funziona alla grande per i browser più recenti, tuttavia, come è stato sottolineato, IE7 non funziona in.

La mia soluzione alternativa per questo problema per supportare i browser meno recenti era di avvolgere il contenuto di ogni cella all'interno di un div. Quindi aggiungi un margine superiore al div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

L'impostazione dell'altezza mantiene le celle alte almeno 30px per evitare che la colorazione delle celle utilizzata all'interno del div collassi attorno al testo. Il margine superiore crea lo spazio desiderato rendendo l'intera riga più alta.

Mi sono imbattuto in questo mentre cercavo di risolverlo da solo. Ho avuto successo mettendo un <br>tag subito prima del </tbody>tag di chiusura . È una correzione puramente visiva, ma sembra funzionare sulla maggior parte dei browser che ho testato.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Dovrebbe essere anche accessibile.