How to put spacing between TBODY elements

Question

I have a table like this:

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

I'd like to put some spacing between each tbody element, but padding and margin have no effect. Any ideas?

Answer 1

Something like this will work, depending on your browser support requirements:

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

Answer 2

Try this, if you don't mind not having borders.

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