Menu
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?
201
You usually use padding to add distance between a border and a content.
You may use more than one <tbody> per table as long as they are all consecutive. This lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired.
Something like this will work, depending on your browser support requirements:
tbody::before { content: ''; display: block; height: 15px; } 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
