How to Add Space Between Table Rows with CSS?

How to Create Space Between Table Rows

Separating table rows can be achieved using the padding property on td elements. To provide the desired spacing, employ the following CSS:

/* Apply padding to td elements that are direct children of tr elements with class spaceUnder. */
tr.spaceUnder > td {
  padding-bottom: 1em;
}

This code ensures that padding is only applied to td elements that are directly descended from tr elements with the class spaceUnder. This allows for nested tables.

To demonstrate, consider the following table:

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

With the CSS provided, there will be a space underneath row CD, while rows AB and EF remain unaffected.

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