如何在 HTML 中的表格行之间添加垂直间距？

Space Separation in HTML Tables: A Comprehensive Guide

As web developers, we often work with tables to present data in a structured manner. However, situations may arise where you require additional vertical separation between table rows, beyond what browsers typically provide. Can this be achieved using CSS?

CSS for Table Row Spacing

One common misconception is that the CSS property border-spacing can be used to add vertical space between table rows. While it does adjust the spacing between table cells, it does not affect the vertical distance between rows.

Solution: Padding to the Rescue

To create space between table rows, the key lies in applying padding to individual table cells (). Consider the following CSS code:

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

The td elements within tr rows bearing the class spaceUnder will receive a bottom padding of 1em, effectively pushing the rows further apart. This allows you to create vertical spacing between selected rows while maintaining a clean and organized table structure.

Additional Considerations

Note that this solution only operates on direct children of tr elements. This enables the creation of nested tables with different spacing between sections, as exemplified in the code below:

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

以上是如何在 HTML 中的表格行之间添加垂直间距？的详细内容。更多信息请关注PHP中文网其他相关文章！