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 <td> 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 <td> element in the <tr> 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 <td> element that is a direct child of a <tr> 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!