How to Add Spacing Between Rows in a Table Without Using Border-Spacing?

Spacing Rows in a Table

Adding vertical spacing between table rows enhances readability and visual appeal. While border-spacing may seem like the ideal property for this purpose, it only affects the spacing between table cells. To achieve row spacing, we must explore alternative solutions.

The key lies in adjusting the padding of individual table data cells ( elements). Here's a CSS solution:

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

In this code, we target direct children (>) of table rows with the class "spaceUnder." This allows for selective spacing, which can be useful in nested table scenarios.

The "padding-bottom" property defines the vertical spacing below the cell contents. Adjust this value as desired to achieve the preferred row spacing. By padding the bottom of the cell, we effectively create a gap between the cell and the row below it.

So, while border-spacing is not applicable in this case, padding provides an effective means to control row spacing in tables.

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