How to put spacing between TBODY elements

html

responsive-design

css

best-practices

byNikita Barsukov·Jan 14, 2025

To insert space between TBODY elements with CSS, use the following snippet:

tbody:not(:last-child)::before {
    content: ""; /* Magic trick to create a ghost row */
    display: block; /* Ghost needs space to float */
    height: 10px; /* Control the ghostly spacing here */
}

We leverage :not(:last-child) to prevent any phantom space from appearing after the last TBODY.

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:

Transform TBODY into a block, because it's trendy.
Invoke a ::before pseudo-element with a block display and an empty string content. These spectral entities adore empty spaces!
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.

explain-codes / Html / How to put spacing between TBODY elements

Linked

Padding a table row



How do I set vertical space between list items?



How to create a table only using `` tag and CSS



Css to line break before/after a particular `inline-block` item



Css: how do I create a gap between rows in a table?

