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

HTML 表格中的空格分隔：综合指南

作为 Web 开发人员，我们经常使用表格以结构化方式呈现数据。但是，可能会出现这样的情况：您需要表行之间有额外的垂直分隔，这超出了浏览器通常提供的范围。这可以使用 CSS 实现吗？

表格行间距的 CSS

一个常见的误解是 CSS 属性 border-spacing 可用于在表格之间添加垂直空间行。虽然它确实调整表格单元格之间的间距，但它不会影响行之间的垂直距离。

解决方案：填充来救援

在表格行之间创建空间，关键在于将填充应用于各个表格单元格 (

)。考虑以下 CSS 代码：

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

带有 spaceUnder 类的 tr 行中的 td 元素将接收 1em 的底部填充，有效地将行进一步分开。这允许您在选定的行之间创建垂直间距，同时保持干净且有组织的表结构。

其他注意事项

请注意，此解决方案仅适用于 tr 的直接子级元素。这使得可以创建部分之间具有不同间距的嵌套表格，如下面的代码所示：

<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中文网其他相关文章！