askvity

How Do I Increase the Space Between Rows in a Table in CSS?

Published in CSS Table Spacing 2 mins read

To increase the space between rows in a table using CSS, you can apply a margin to the table rows.

According to the reference, to add space between rows in CSS, you can use the margin property. Specifically, applying margin-bottom to each row (<tr>) will create vertical space after each row.

tr {
  margin-bottom: 10px; /* Adjust the pixel value as needed */
}

This code snippet targets all <tr> (table row) elements within your HTML table and adds a margin of 10 pixels to the bottom of each row. This effectively creates a 10 pixel space between each row.

You can easily adjust the pixel value (e.g., 10px) to increase or decrease the amount of space according to your design requirements. For instance, margin-bottom: 20px; would create a larger gap.

Implementing the Margin Method

Here’s a breakdown of how to apply this:

  1. Locate your CSS file or style block: You'll need to add this CSS rule within your <style> tags in the HTML <head> or, preferably, in an external CSS file linked to your HTML document.
  2. Target the <tr> element: Write a CSS rule that selects the <tr> elements.
  3. Apply margin-bottom: Add the margin-bottom property with your desired pixel value to the rule.

Example HTML Table Structure:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A1</td>
      <td>Data A2</td>
    </tr>
    <tr>
      <td>Data B1</td>
      <td>Data B2</td>
    </tr>
    <tr>
      <td>Data C1</td>
      <td>Data C2</td>
    </tr>
  </tbody>
</table>

Applying the CSS:

/* Style for spacing between rows */
tr {
  margin-bottom: 15px; /* Example: 15px space */
}

/* Optional: Basic table styling for clarity */
table {
  border-collapse: separate; /* Important for margin/border-spacing */
  width: 50%;
  margin: 20px auto;
  border: 1px solid #ccc;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #eee; /* Optional: subtle line */
}

When applying margin or border-spacing to tables, it's often necessary to set border-collapse: separate; on the <table> element, as border-collapse: collapse; (the default in some browser stylesheets) can interfere with spacing properties.

By using the margin-bottom property on <tr> elements, as indicated by the reference, you can effectively increase the vertical space separating the rows in your HTML table.

Related Articles