如何在不使用 CSS 的情况下在表中的行之间添加空格？-css教程-PHP中文网

如何在不使用 CSS 的情况下在表中的行之间添加空格？

Linda Hamilton

发布： 2024-11-13 06:56:02

原创

859 人浏览过

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

如何在不使用 CSS 的情况下在表格中的行之间添加空格

您可能想知道是否可以在表格中的行之间添加空格使用CSS。不幸的是，CSS 属性 border-spacing 并没有达到这种预期的效果。 border-spacing 属性仅在表格单元格之间添加空间，而不是在行之间添加空间。

相反，您需要在

上使用填充。用于在行之间添加空间的元素。您可以使用以下 CSS 代码：

tr.classname td {
  padding-bottom: 5em;
}

登录后复制

这将为每个

的底部添加 5em 的填充。中的元素与类的类名。您可以根据需要调整填充量。

以下是其工作原理的示例：

<table class="classname">
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </tbody>
</table>

登录后复制

这将创建一个每行之间有 5em 空间的表格。

请注意，您也可以使用顶部填充代替底部填充，具体取决于您想要的效果。

如果您需要要在嵌套表中的行之间添加空间，您可以使用以下 CSS 代码：

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

登录后复制

这将为每个

的底部添加 1em 的填充。作为的直接子元素的元素具有 spaceUnder 类的元素。

以上是如何在不使用 CSS 的情况下在表中的行之间添加空格？的详细内容。更多信息请关注PHP中文网其他相关文章！