首页  >  文章  >  web前端  >  如何使用 CSS 在表中的行之间添加空格?

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

Susan Sarandon
Susan Sarandon原创
2024-11-11 14:37:02131浏览

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn