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