How to Add Space Between Rows in a Table Without Using CSS?

How To Space Between Rows in a Table Without Using CSS

You may be wondering if it's possible to add space between rows in a table using CSS. Unfortunately, the CSS property border-spacing does not achieve this desired effect. The border-spacing property only adds space between table cells, not between rows.

Instead, you will need to use padding on your elements to add space between rows. You can use the following CSS code:

tr.classname td {
  padding-bottom: 5em;
}

This will add 5em of padding to the bottom of each element in the with the class classname. You can adjust the amount of padding as needed.

Here is an example of how this would work:

<table class="classname">
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </tbody>
</table>

This will create a table with 5em of space between each row.

Note that you can also use a top padding instead of a bottom padding, depending on your desired effect.

If you need to add space between rows in nested tables, you can use the following CSS code:

tr.spaceUnder > td {
  padding-bottom: 1em;
}

This will add 1em of padding to the bottom of each element that is a direct child of a element with the class spaceUnder.

The above is the detailed content of How to Add Space Between Rows in a Table Without Using CSS?. For more information, please follow other related articles on the PHP Chinese website!