Space between two rows in a table?

Practical tactics for precise row spacing

Spacing using CSS classes

Make use of CSS classes instead of inline styles. For example, we can use a class named .spaceUnder for rows that require some breathing space:

/* Social distancing for our table rows */
tr.spaceUnder > td {
  padding-bottom: 1em;
}


This approach makes our HTML tidy and gathers styling rules in one place.

Treatment for nested tables

Handling nested tables can be trickier than a cat in a game of twister. Use the CSS rule to exclude them to avoid misbehaving styles:

/* Selects tds which don't secretly harbor mini tables */
tr.spaceUnder > td:not(:has(table)) {
  padding-bottom: 1em;
}


Spacing rows using border models

border-spacing, though sounding like a border agent's lunch break, can be employed to inject space between rows. However, it works on the <table> or <tbody> element, not <tr>:

table {
  border-collapse: separate; /* Because borders sometimes need their space */
  border-spacing: 0 1em; /* horizontal plus vertical */
}


Note: Remember, border-spacing only plays nicely when border-collapse set to separate.

Employing empty rows for space

An empty <tr class="spacer"> with certain height can provide divergence without affecting the design:

<!-- Invisible doorman keeping rows apart -->
<tr class="spacer" style="height: 20px;"></tr>


Remember to style it transparent or invisible to keep the layout clear.

Visual separation strategies with style

Using borders for spacious vibes

A transparent top border can act as a seasoned bouncer, keeping the row entries in line:

/* Every row gets a hat, but it's invisible */
tr + tr {
  border-top: 5px solid transparent;
}


Unchanging table styles

To make sure row spacing doesn't throw your table design off-balance, make use of table-layout: fixed;:

table {
  table-layout: fixed; /* The periodic table also has a fixed layout */
}


Visual separation using tbody

Group your table rows into multiple <tbody> elements. This creates meaningful blocks that can be spaced apart like a well-practiced choir:

<table>
  <tbody class="group-spacing">
    <!-- treble -->
  </tbody>
  <tbody class="group-spacing">
    <!-- bass -->
  </tbody>
</table>


This choir needs its conductor:

tbody.group-spacing {
  border-spacing: 0 1em;
}


Browser compatibility

Ensure all your code excels in all browsers like a virtuoso in a music competition. Some methods, like border-spacing, may feel a bit too high note for older versions of Internet Explorer (IE).

Nailing the fine details for all use cases

Responsive table designs

Making tables play nicely with different screen sizes is like trying to fit an elephant into a mini. Use media queries to adjust row spacing on various screens.

Tables with rich content

Dealing with tables filled with enriched content, like unicorn pictures or organic kale recipes, demands spacing both inside and around the content for a clear and clean table diet.

Accessibility is essential

Remember, tables are not cliff jumps. Don't let your added spacing interfere with screen readers or keyboard navigation. Accessibility is a right, not a privilege.