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

html

responsive-design

css

best-practices

byNikita Barsukov·Nov 3, 2024

To create a vertical gap between table rows, you can set the border-spacing property for a table and border-collapse: separate. Another approach would be to add margin to tr elements styled as block or use a ::before pseudo-element to introduce the space:

/* Yeah, it's just like martini, shaken, not stirred */
table {
    border-collapse: separate; /* Keep those borders apart like exes at a party */
    border-spacing: 0 10px;    /* No horizontal, but yes vertical gap */
}
/* Like adding 10px of personal space in a crowded elevator */
tr + tr::before {
    content: "";
    display: block;
    height: 10px; /* Controlling the space like a bouncer at the club */
}

Use border-spacing for reliable and straightforward implementation, or ::before pseudo-elements for those complex styling scenarios. It's all about your table structure and personal style.

The ins and outs of table gaps

There's no faster way to drive your website visitors away than by presenting them with a poorly formatted table. Let's delve into the techniques for creating consistent and beautifully spaced table rows:

Padding it out

Throwing some padding-top or padding-bottom onto td elements is a tried and true method for making room between rows. But border-collapse: collapse can crash this party by removing that hard-earned space.

Legacy tricks and browser rodeos

If you're dealing with a herd of vintage browsers, the old cellspacing attribute on the table tag might be your savior. With most CSS resets, cellspacing="0" will ensure consistency across the wild west of different browsers.

Squeezing in some room

An alternative approach is to slide empty tr elements with set height for a visual break between rows. It's the transparent spacer you never knew you needed.

A word on line-height

Adjusting line-height can influence the visual spacing between rows. It's like tug-of-war with border-spacing, so make sure you're not pulling in the wrong direction!

Next-gen layouts

Who said we're stuck with tables for non-tabular data layouts? CSS layout techniques have evolved - ever heard of Flexbox or Grid?

Advanced row-gap techniques

Beyond basic row-gap generation in tables, let's explore some customizable solutions and troubleshooting tips:

Pseudo hijinks

Looking at your fancy table and thinking "This needs some jazzing up"? Customizing the tr::before pseudo-element is your design wand. Control introduce space, create shadows, or even a rainbow row gap.

Bend it like media query

Tables should look good on all devices, right? Use media queries to make row gaps look just as good on a smartphone as they do on a 4k display.

When borders play spoilsport

When border-spacing is your go-to guy, but borders start jostling for visual space, take control with border-style settings or color them transparent.

Phantom spacing issues

If table rows appear too far apart despite your best efforts, overzealous margin or padding could be your culprits. Or perhaps inherited styles are playing catch - keep an eye out for these.

explain-codes / Html / Css: how do I create a gap between rows in a table?

Linked

Why is a div with "display: table-cell;" not affected by margin?



Setting table row height



Css Cell Margin



How to force table cell `` content to wrap?



Alternate table row color using CSS?

