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

How to Create Space Between Rows in a Table

Question:

Is it possible to add space between rows in a table using CSS? The following code is not producing the desired result:

tr.classname {
  border-spacing: 5em;
}

Answer:

To create space between rows in a table, you need to use padding on the td elements. You can use the following CSS code:

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

In this code, the tr.spaceUnder > td selector applies the padding only to td elements that are direct children of tr elements with the class spaceUnder. This allows you to use nested tables without affecting the spacing between rows.

Example:

<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>

Output:

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