How to put spacing between TBODY elements

Practical spacing solutions and tricks

Pseudo-element spacing: Introducing the ghost row

Utilize a ::before or ::after pseudo-element to conjure up an invisible "buffer" or a "ghost row" between your TBODY elements. Let's break this into three enchantments:

1. Transform TBODY into a block, because it's trendy.
2. Invoke a ::before pseudo-element with a block display and an empty string content. These spectral entities adore empty spaces!
3. Adjust the height of the ::before to stage the spacing.

tbody {
    display: block; /* Because everyone loves trendy blocks */
}

tbody:not(:last-child)::before {
    content: ""; /* Creativity level: Ghost */
    display: block; /* Ghost Blockbusters */
    height: 15px; /* If you aim for the stars, you might hit the ceiling instead */
}


Visual spacing with border-top : Calling the border patrol

In an alterworld, you can use border-top on each TBODY to visually separate the sections. When combined with a simple border-collapse: collapse; trick, you won't get borders doubling up, and you won't need the ghostbusters:

table {
    border-collapse: collapse; /* Playing Tetris with borders */
}

tbody:not(:first-child) {
    border-top: 5px solid #000; /* Border control level: Spacing elements */
}


Want to customize the color of the border-top and intensify the look? Go for it, Picasso!

Boundary-less spacing: Going commando

For times when you want spacings without the pesky little lines (going commando?), subtract the borders entirely from the TBODY:

tbody:not(:last-child) {
    border-bottom: none; /* Going commando here */
}


Meet the minimalist design and clean spacings you've always dreamt of.

Shedding light on caveats and quirities

CSS compatibility: Beware of the browser boogeyman

When performing these spacing acts, keep an eye out for the browser boogeyman. Old browsers might not be a fan of the recent chartbusters like ::before and display: block; on TBODY.

Understanding border-collapse: Wrestling with the borders

The border-collapse trick can mess around a bit - it's the mischievous twin of the border patrol. When collapse is in play, shared borders are rendered, while separate maintains each border in its own space.

Designing with aesthetics: Tailoring to fit

Take control of your design. Thicker borders for a bold statement, thinner lines or invisible spacing for a subtle, refined look. Perfectly adjustable for your sartorial satisfaction.