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

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

Susan Sarandon

发布： 2024-11-11 14:37:02

原创

189 人浏览过

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

如何在表中的行之间创建空间

问题：

是否可以在表中的行之间添加空间使用 CSS 的表格？以下代码不会产生所需的结果：

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

登录后复制

答案：

要在表中的行之间创建空间，您需要在 td 上使用填充元素。您可以使用以下 CSS 代码：

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

登录后复制

在此代码中，tr.spaceUnder > td 选择器仅将填充应用于属于 spaceUnder 类的 tr 元素的直接子元素的 td 元素。这允许您使用嵌套表格而不影响行之间的间距。

示例：

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

登录后复制

输出：

A	B

C	D
E	F

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