Comment mettre un espacement entre les éléments TBODY

Question

J'ai une table comme celle-ci:

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

Je voudrais mettre un peu d'espacement entre chaque élément tbody, mais le rembourrage et la marge n'ont aucun effet. Des idées?

Answer 1

Quelque chose comme cela fonctionnera, selon les exigences de votre navigateur:

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

}
 

Answer 2

Essayez ceci si cela ne vous dérange pas de ne pas avoir de frontières.

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

Answer 3

Les gens vont toujours avoir des opinions controversées sur l'utilisation de la table vide éléments de mise en page d'une page (comme en témoigne cette réponse est downvote). Je reconnais, mais il est parfois plus facile de les utiliser de cette façon, lorsque vous travaillez dans un "rapide et sale".

J'ai utilisé les lignes vides dans les projets passés à l'espace des groupes de lignes de la table. Je lui ai donné la bague d'espacement des lignes d'une classe css qui leur est propre et défini une hauteur de cette classe, qui a agi comme un haut et en bas de la marge pour que le groupe de lignes de la table.

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

Si vous n'avez pas de frontières sur votre table de cellules, vous pouvez également définir une hauteur typique cellule ou une ligne dans votre feuille de style que l'espace uniformément toutes les lignes de votre table.

tr{
   height: 40px;
}

Answer 4

Voici une autre possibilité qui repose sur: first-child, qui n'est pas disponible dans tous les navigateurs:

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

Answer 5

Il suffit de définir display comme block et cela fonctionnera.

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